Vue项目根据不同运行环境打包项目

前提

项目是直接通过 vue-cli脚手架 生成的；
假设在项目开发中，分为三个环境 --
· 测试环境
· 预生产环境
· 生产环境

每个环境的接口地址都是不同的，而 vue-cli 给出的环境只有 dev 和 prod 这两个。虽然可以选择每次打包项目前手动修改 config/prod.env.js 中的 BASE_API 属性值，再运行 npm run build 打包项目就OK了，但还是挺烦的。如果能根据不同环境打包就一劳永逸了

步骤

第一步安装依赖 `cross-env`

使用 cross-env 解决跨平台问题。在终端运行：


npm install cross-env --save-dev  // 安装 cross-env 依赖

此依赖写入 devDependencies 中，仅在开发环境中使用此依赖。

第二步修改 package.json 文件

在 package.json 中 scripts 属性中 build 命令替换为：


// 生产环境
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
// 测试环境
"build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js", 
// 预生产环境
"build:prep": "cross-env NODE_ENV=production env_config=prep node build/build.js"

第三步添加各环境参数

在 config 目录下添加 sit.dev.js(测试环境) 和 prep.dev.js(预生产环境)。
那么 config 目录下有三个js文件分别对应三个环境：

(1) sit.dev.js(测试环境)


module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"sit"',
  BASE_API: '"xxx"'    // 测试环境接口地址
}

(2) prep.dev.js(预生产环境)


module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prep"',
  BASE_API: '"xxx"'    // 预生产环境接口地址
}

(3) prod.dev.js(生产环境)


module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  BASE_API: '"xxx"'     // 生产环境接口地址
}

第四步修改 build/webpack.prod.conf.js 文件


const env = require('../config/prod.env')

使用构建环境参数，将 build/webpack.prod.conf.js 中的此行代码修改为：


const env = require('../config/' + process.env.env_config + '.env')

第五步打包项目


// 测试环境打包项目
npm run build:sit

// 预生产环境打包项目
npm run build:prep

// 生产环境打包项目
npm run build:prod

-- END --
不足之处，欢迎指出；不喜请绕道，谢谢！

来源：https://segmentfault.com/a/1190000016410207