估计上线的时候，大家都遇到过这个烦恼，测试线和生产线的api基础域名不同，如果手动改起来实在麻烦，其实webpack中内置了多环境域名自定义打包的功能；
第一步
npm install cross-env -g
第二步
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js",
"build:test": "cross-env NODE_ENV=production BUILD_ENV=test node build/build.js",
"build:prod": "cross-env NODE_ENV=production BUILD_ENV=prod node build/build.js"
},
在package.json里配置 build:test build:prod，
第三步
修改config目录下的prod.env.js
'use strict'
const BUILD_ENV = process.env.BUILD_ENV
let baseUrl
switch (BUILD_ENV) {
case 'test':
baseUrl = 'http://api.test.com'
//测试
break;
case 'prod':
baseUrl = 'http://api.prod.com'
//生产
break;
}
module.exports = {
NODE_ENV: '"production"',
BUILD_ENV: '"' + BUILD_ENV + '"',
baseUrl: '"' + baseUrl + '"',
}
改后，可以在项目里通过process.env拿到暴露出去的api基础域名，其实这里已经可以用npm run build:test(使用测试线域名打包),npm run build:prod(使用生产线域名打包)，但这里还需要一个开发环境基础api：
第四步
更改config目录下的dev.env.js
更改如下：
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
baseUrl: '"http://127.0.0.1"'
})
相当于增加了一个开发环境基础域名
第五步
在基础域名变量取值的时候做一个判断
const BASE_URL = process.env.baseUrl || process.dev.baseUrl
笔者的项目基础域名取值是在src/api/url.js下
success
使用方法如下
npm run build:test ========>测试环境下打包
npm run build:prod ========>生产环境下打包
npm run dev ========>开发环境下开发
