env全局环境变量在webpack 或 vite 中使用方式

已于 2024-06-26 16:31:18 修改
阅读量647 收藏 9
点赞数 4
文章标签： webpack vue.js 前端
于 2024-06-26 16:09:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48239481/article/details/139990121
版权

.env文件是用来配置应用程序中的全局变量的文件

通常用于根据应用程序运行的环境比如开发环境或生产环境设置不同的参数
例如： 请求的地址或者其他配置信息 这样做可以防止因为忘记修改配置而导致不必要的问题或操作

将env创建在项目根目录易于访问和管理:
.env：全局默认配置文件 无论什么环境都会加载合并
.env.development：开发环境的配置文件
.env.production：生产环境的配置文件

webpack中使用

以vue-cli举例 vue-cli要求自定义环境变量必须以 VUE_APP_ 开头这样的前缀告诉vue-cli哪些变量是专门为你的Vue应用程序设置的 而不是其他系统或环境可能设置的变量

创建  .env.development

//仅为示例
NODE_ENV="development"
VUE_APP_BASE_URL="/api"

创建  .env.production

//仅为示例
NODE_ENV="production"
VUE_APP_BASE_URL="http://127.0.0.1:5500"

在这里插入图片描述

在运行开发环境时 node会自动将配置切换到开发模式development
在打包生产环境时 node会切换到生产模式production
这个命名是固定的 如果创建的文件名称错了将读不到设置的环境

如果想要自定义.env文件名并使用的话可以借助dotenv-cli 这个包帮我们去自定义
例如：
我们想要在开发环境中使用 .env.dev 文件来设置环境变量 首先 需要创建一个名为 .env.dev 的文件 并在其中配置所需的环境变量 然后 在 package.json 文件中 只需在希望设置环境变量的脚本位置添加 dotenv -e .env.dev 的前缀即可
在这里插入图片描述
这样当我们运行dev时 在项目中使用 process.env 读取环境变量时就会读取到 .env.dev 文件中设置的一些环境变量
例如：
在这里插入图片描述

vite中使用

和webpack基本一致
环境变量命名格式换成 VITE_ 开头

NODE_ENV=dev
VITE_GLOB_BASE_URL="dev"

在项目中使用时使用
import.meta.env去读取当前运行环境配置的全局环境变量
在这里插入图片描述

妙蛙妙哇
关注
webpack
兔子零
01-09 308
对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面：entry 、 output 、 mode 、 resolve 、 module 、 optimization 、 plugin 、 source map 、 performance 等，本文就来重点...
Vue3.0+vite vite.config.ts配置与env
qq_42396791的博客
03-15 1595
【代码】Vue3.0 vite.config.ts配置。
webpack使用环境变量
qq_43618136的博客
04-19 332
要在开发和生产构建之间，消除 webpack.config.js 的差异，你可能需要环境变量。 webpack 命令行环境配置中，通过设置 --env 可以使你根据需要，传入尽可能多的环境变量。在 webpack.config.js 文件中可以访问到这些环境变量。例如，–env.production 或 --env.NODE_ENV=local（NODE_ENV 通常约定用于定义环境类型，查看这里...
webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用
最新发布
前端蜗牛君
04-23 1226
mode是设置执行模式，webpack4会自动将mode的值通过设置为全局变量，业务代码中可以使用process.env.NODE_ENV读取值。NODE_ENV是设置Node环境变量，在webpack.config.js、webpack.dev.js等文件中通过读取值。cross-env是用来解决跨环境的。用来设置全局变量，在业务代码中通过读取值。
webpack-cli搭建得项目 分环境控制变量 .env
qq_38935512的博客
09-28 987
问题 实际开发过程当中，例如url 会根据不同得环境不一样，有分测试，开发，生产，预生产等，可以根据不同得环境来配置不同得环境变量，下面解决过程基于node10以上 1.第一步：在package.json中配置脚本 通过 --e test --e prod来告知webpack打包得环境，平常来说webpack是无法识别得需要借助插件yargs 注意：这里想特别说明一下的是，vue-cli脚手架帮我们生成好了整个项目，而且也有对应webpack.dev.conf.js和webpack.prod.conf.
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
见贤思齐焉，见不贤内自省
12-27 5837
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
webpack迷之参数--env --mode NODE_ENV
景色分明
11-26 3182
环境变量 参数配置 参数 说明 类型 –env 当配置文件是一个函数时，会将环境变量传给这个函数 string –mode ‘development’ 或者 ‘production’ string webpack --env prod=1 module.exports = (env, arg) => { // env { prod:1 } // arg.env = env } webpack --mode production 注意⚠️ 命令行中的mode参数，会覆盖
理解webpack之process.env.NODE_ENV详解(十八)
weixin_34019144的博客
10-12 3609
在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量，在webpack中它的用途是判断生产环境或开发环境的依据的。 为了查看 process的基本信息，我们可以在文件夹中 新建一个 process.js 文件，在里面加一句代码：cons...
vue index.html环境变量,vue-cli环境变量与模式
weixin_32858247的博客
07-04 1310
vue-cli环境变量与模式模式环境变量环境文件加载优先级示例：Staging 模式在客户端侧代码中使用环境变量public/index.html只在本地有效的变量推荐阅读你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特《人生果实》经典语录vue-cli3.0移除了配置文件目录： config和build文件夹。改为.env自定义配置环境变量和模式日常工作中，主要用来区分本地开发环境，测...
vue3 全局变量 process.env.NODE_ENV
08-20
那么你可以在代码中使用import.meta.env.VITE_API_URL来获取该变量的值： ```javascript console.log(import.meta.env.VITE_API_URL); // 输出：https://api.example.com ``` 总之，在Vue 3中，你可以使用import....
webpack-env-loader
05-05
webpack-env-loader 根据运行环境以JSON格式加载应用设置。 您可以使用自己的环境设置来设置多个应用程序。 将其添加到您的项目 npm install webpack-env-loader --save-dev 如何使用它 ？ 在您的webpack.config.js中 module.exports = { entry: ..., loader: { appSettings: { name: {myAppName}, // string, default to 'app' env: {myEnv} // string, default to 'development' } }, output: ... } 在您的文件中 var sett
深入理解webpack process.env.NODE_ENV配置
11-20
在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量，在webpack中它的用途是判断生产环境或开发环境的依据的。 为了查看 process的基本信息，我们可以在文件夹中 新建一个 process.js 文件，在里面加一句代码：console.log(process);然后进入该文件夹，执行 node process.js 可以在命令行中打印如下信息： $ node process.js process { title: 'nod
使用vite从头搭建一个vue3项目
04-18
开发过程中，可以使用`.env`文件来管理环境变量，通过`vite.config.js`调整项目配置，而`.gitignore`则用于防止不必要的文件被提交到版本库。 总之，使用Vite 3和Vue 3搭建项目可以享受到快速的开发体验和强大的...
Vite基本使用
chengxuyuan3629的博客
10-16 725
vite基本使用
Vue3: vite打包环境变量配置
西魏陶渊明的博客
03-25 794
Vue3 + Vite打包环境配置如何配置
vite打包构建时环境变量（env）生成可配置的js文件
胡萝卜先生的进阶之路
03-01 3716
在vite开发过程中，一些变量可以放在.env（基础公共部分变量）.env.dev（开发环境）、.env.production（生产环境）中管理，通常分成开发和生产两个不同的配置文件管理；但是在部署调试的过程中会有不同的若干个环境运行，这时候需要修改.env.production中的部分变量（如api地址）重新打包会比较麻烦；
webpack的配置文件（二、基本配置）
weixin_41510467的博客
11-05 388
在vue中，我们并不是每次改完代码都打包看效果，而是在开发过程中有一个测试服务器，自动帮我们产生预览效果，但是并会真的去打包，只有等上线的时候我们才去打包。我们在第一节的概述中提及了webpack的五个核心概念，这五个核心概念都属于webpack的配置，因此，如果需要更好的运用webpack，我们需要掌握其配置文件的相关知识点。通过上一节，我们已经可以使用打包工具去将写好的代码进行打包了，但是在操作的过程中大家可能会发现有一个比较麻烦的地方：修改一次代码就得重新打包一次，这种感觉有点类似于之前的。
【webpack核心】- 14、env区分环境
充电五分钟...
06-20 1477
文章目录1、区分环境方法1：写两个配置文件 1、区分环境 有些时候，我们需要在webpack.config中 针对生产环境和开发环境分别书写webpack配置 方法1：写两个配置文件 简单粗暴的，分别写两个配置文件，webpack.dev.js 和 webpack.prod.js，然后在package.json里配置脚本,指定配置文件 "scripts": { "dev": "webpack --config webpack.dev.js", "prod": "we
【Vue3实践】（六）Vue3使用vite处理环境变量、打包部署、nginx配置
热门推荐
积木成林，聚沙成塔
03-28 1万+
本篇的主要内容是Vite中环境变量的使用以及打包部署，包含以下关键点： - 环境变量 -通过`.env`文件来划分环境，命名规则为`.env.[mode]` - `vite`指令的默认mode为`development`，`vite build`的默认mode为`production`，可以根据这个默认值来命名 - `.env`文件也可以不加mode，这样的文件在任何情况下都可以被引用，但是优先级低于有`[mode]`的文件 - 如果想让客户端直接使用，`.env`文件中的变量名应该以`VITE_
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值