下面介绍如何结合vue-cli配置多套环境变量
版本:
当前vue-cli版本为4.54
目的:
规范项目开发流程,降低上线心智负担
例如配置两套环境,一套生产环境,一套开发环境。
开发环境
1.首先,在项目根目录新建文件名为.env.development的文件
2.打开该文件编辑环境变量(必须以VUE_APP_开头的变量才能被webpack.DefinePlugin正确嵌入)
如:配置开发环境CDN路径则为
NODE_ENV = development #若为生产环境此处应配置为production
VUE_APP_CDN="http://cdn.xxx.com/"
生产环境
1.首先,在项目根目录新建文件名为.env.production的文件
2.打开该文件编辑环境变量(必须以VUE_APP_开头的变量才能被webpack.DefinePlugin正确嵌入)
如:配置开发环境CDN路径则为
NODE_ENV = production#若为开发环境此处应配置为development
VUE_APP_CDN="http://cdn.dev.xxx.com/"
最终配置
1.编辑根目录package.json文件
在scripts
中添加
"scripts": {
~~~
"serve": "vue-cli-service serve",
"serve--prod": "vue-cli-service serve --mode production",
"build": "vue-cli-service build",
"build--prod": "vue-cli-service build --mode production",
~~~
},
开发模式使用
npm run serve #项目启动
生产模式使用
npm run serve--prod #启动
npm run build--prod #打包
最终在项目中使用process.env.VUE_APP_CDN
即可读取到全局环境变量
至此两套环境变量便配置成功,后续新增可自行添加