前端环境变量使用和原理
刀刀
0字
0分钟
2026/8/16
核心内容
- 以Vue为例，一般项目如何定义环境和环境变量
- 环境变量本质
环境变量用途
首先先明确环境变量的用途。环境主要分为开发环境、生产环境、测试环境、预发环境等等，不同的环境需要做不同的处理。如：接口服务器地址等。
手动切换自然可以，但是容易忘记切换导致生产事故的发生，因此使用环境变量能更好的避免生产事故的发生。
环境变量使用
使用环境变量，需要先定义好 .env.环境名称 文件去定义，运行命令时指定环境。每个脚手架创建的项目均有差异。
- Vite+Vue3项目
存：
VITE_变量名 = xxx取：
import.meta.env.VITE_变量名 vue-cli项目（Webpack+Vue2）存：
VUE_APP_变量名 = xxx取：
process.env.VUE_APP_变量名纯粹Webpack打包
存：通过
definePlugins自己定义到全局环境
声明环境变量时，需要注意以下几点：
.env文件是保底文件，所有环境都生效；.env.development文件是开发环境的文件；.env.production是生产环境的文件；.env.test是测试环境的文件- 在
.env文件中声明环境变量时，无论是数值型还是字符串型，均不需要添加引号
在 package.json 文件通过在命令后面添加 --mode= 可以覆盖替换模式。
js
{
"script": {
"dev": "vite", // 开发模式
"test": "vite --mode=test", // 测试模式
"build": "vite build", // 生产环境打包
}
}如果是Webpack打包它本身是无法读取环境变量的，需要下载 cross-env 第三方库去指定。如果想获取到 .env 文件内的内容，需要引入 dotenv 。
贡献者
v_duyilin
duyidao 刀刀
平安喜乐