关于多环境变量

fuhs_2

于 2021-12-30 18:45:44 发布

阅读量362

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/fuhs_2/article/details/122240288

版权

本文介绍了如何在Vue项目中使用VUE_APP环境变量进行环境配置，区分开发、测试和生产环境，并通过npm scripts自动化执行不同任务，如本地开发、打包测试和部署。通过`.env`文件灵活切换环境，无需重启项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多环境变量

多环境变量就是让内容根据代码进行改变

配置多环境变量

pack.json中的script配置sever test build, 通过–mode xxx来执行不同环境
如:
* 通过 npm run server 启动本地,执行 development
* 通过 npm run test 打包测试, 执行 testing
* 通过 npm run build 打包测试, 执行production

"script": {
	"server": "vue-cil-service serve --open",
	"test": "vue-cil-service build --mode testing",
	"build": "vue-cil-service build"
}

配置介绍

以VUE_APP开头的变量,在代码中可通过process.env.VUE_APP访问.

.env.development 本地开发环境配置
NODE_ENV='development'
.env.staging 测试环境配置
NODE_ENV='production'
.env.production 正式环境配置
NODE_ENV='production'

去 config 下新建三个对应的文件是因为修改起来方便，不需要重启项目，符合开发习惯