Vue-Cli4.x配置开发环境、生产环境、测试环境接口。

一个项目的开发环境接口、测试环境接口、生产环境接口都是不一样的。每次打包之前手动去更改肯定是不利于维护的。因此下文介绍Vue-Cli4.x的接口配置。

1. 各环境介绍

• development 开发环境
• production 生产环境
• test 测试环境

2. 新建文件

在项目根目录下根据上述3个环境分别创建文件.

• .env.developmen 开发环境
• .env.production 生产环境
• ·.env.test` 测试环境

下图为创建之后的图片。

3. 各文件内容编写

.env.development 开发环境文件

	// development 开发环境
	NODE_ENV='development'
	// 下面的为接口地址。此处/api是我经过webpack设置跨域代理之后的地址
	VUE_APP_BASE_URL='/api'

.env.production

	// production 生产环境
	NODE_ENV = 'production'
	// 下方链接为生产环境接口地址
	VUE_APP_BASE_URL='http://我是生产环境接口地址'

.env.test

	// test 测试环境
	VUE_APP_MODE = 'test'
	// 下方链接为测试环境接口地址
	VUE_APP_BASE_URL = "http://我是生产环境接口地址"
	outputDir = test

配置完成之后重新npm run serve启动。打印process.env就会看到自己的配置项。可以看到对象中有个VUE_APP_BASE_URL属性就是接口地址，它会根据你的环境自动切换。

Axios拦截器修改请求地址。

如果项目中没有使用axios拦截器来统一设置请求地址的就不用看这一步。

	const server = axios.create({
		baseURL: process.env.VUE_APP_BASE_URL
	})

4. 修改vue.config.js文件

如没有vue.config.js文件，就自己新建一个
下方为vue.config.js基本结构

	// 基本结构
	module.exports = {
		// 打包后路径错误导致的空白页面问题。
		publicPath: './',
		outputDir: process.env.outputDir
	}

5. 修改package.json文件

修改该文件可以打包的时候同时生成两个文件夹
dist放在生产环境
test放在测试环境

	// 下方为修改后代码
	"build": "vue-cli-service build && vue-cli-service build --mode test"

修改后文件截图如下：

至此，终端里面直接运行npm run build就会打包成功。