vue项目配置多套打包环境变量

下面介绍如何结合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即可读取到全局环境变量
至此两套环境变量便配置成功，后续新增可自行添加