目前vue-cli2上原配置是只有开发环境dev和线上环境prod的配置，但是我们实际场景上还有很多需要一个测试环境test,下面就是对测试环境的配置，将测试环境和线上环境的打包代码分开就不需要切来切去了。切入正题
1. 复制一份build/build.js文件命名为build/build-test.js 修改这三处地方
image.png
2. 复制一份build/webpack.prod.conf.js文件命名为build/webpack.test.conf.js 修改这三处地方
image.png
3. 复制一份config/prod.env.js文件命名为config/test.env.js
test.env.js
'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"',
BASE_URL: 'https://test.com'
})
3.1在dev 和 prod 配置文件也分别加上 BASE_URL
dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_URL: 'https://localhost:8080'
})
prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_URL: 'https://prod.com'
}
4.在package.json文件里添加一条 npm run test 的启动项
image.png
运行npm run test可以看到test的代码已构建到dist-test目录下
image.png
5.可以在封装axios的时候带上process.env.BASE_URL
import Axios from 'axios'
const axios = Axios.create({
baseURL: process.env.BASE_URL,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
export default axios;
不同环境使用不同的域名
到此就可以区分开发环境，测试还，正式环境三个环境了，快去试试吧~
另外，vue-cli3配置测试环境可参考：https://www.cnblogs.com/XHappyness/p/9337229.html
tips: 简书上交流可能会看不到消息，如有问题，欢迎进群交流50063010
