vue项目运用webpack动态打包多环境域名

估计上线的时候，大家都遇到过这个烦恼，测试线和生产线的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 ========>开发环境下开发