vue项目配置生产、测试和开发环境

目前的 web 项目开发基本都是基于前后端分离的模式。

在实际的开发过程中，从开发到测试完成、发布到线上所调用到的接口地址可能都不一样，那就需要在项目中分别配置各个环境的接口地址（或者域名，也可以定义不同环境下的不同变量）。

首先，在项目根目录下新建3个文件 .env 、.env.test、 .env.production

第二步，编辑文件

.env（开发环境）

NODE_ENV=development
VUE_APP_API_URL= 'http://localhost:8080/' // 开发接口域名

.env.test（测试环境）

NODE_ENV=test
VUE_APP_API_URL= 'http://localhost:8080/' // 测试环境接口域名

.env.production（生产环境）

NODE_ENV=production
VUE_APP_API_URL= 'http://localhost:8080/' // 生产环境接口域名

第三步，修改 baseURL

vue 项目一般配套使用 axios 进行接口请求，设置基本请求路径如下，让它根据环境请求不同域名下的接口。

axios.defaults.baseURL = process.env.VUE_APP_API_URL

第四步，打包配置

在 package.json 文件的 scripts 对象中加入

"build:test": "vue-cli-service build --mode test", // 打包测试环境
"build:prod": "vue-cli-service build --mode production", // 打包生产环境
"build": "vue-cli-service build", // 默认打包为开发环境

完成后，在终端运行对应代码，进行打包。如

npm run build 
npm run build:test
npm run build:prod