【转载】vue-cli2配置多环境打包

原文链接：vue-cli2配置多环境打包

目前vue-cli2上原配置是只有开发环境dev和线上环境prod的配置，但是我们实际场景上还有很多需要一个测试环境test,下面就是对测试环境的配置，将测试环境和线上环境的打包代码分开就不需要切来切去了。
1.找到项目根目录下的build文件夹里的build.js文件，然后复制一份出来将文件名修改为build-test.js。内容修改为如下图（修改三个地方）：

image.png

2.复制一份build/webpack.prod.conf.js文件命名为build/webpack.test.conf.js 主要修改这一处地方:

image.png

因为 vue打包后自动会生产dist文件夹，如果你不想覆盖dist文件夹，可以修改打包输出文件夹，还是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: '"test"'
  // BASE_URL: '"https://test.com"' // 可以配置请求地址
})

4.在package.json文件里添加一条 npm run build:test 的启动项

image.png

此时运行npm run build:test测试环境就打包成功了。可以看到test的代码已构建到dist目录下。

但是现在去访问页面发现是空白的，控制台报404，就是资源没加载成功。

解决方法：修改build/webpack.base.conf.js文件

image.png

将test环境添加进去就可以了。

重新打包运行，页面OK！

---------------------更新---------------------------
按上面配置好后，打包是没问题了，但是我发现在本地开发环境运行有问题。所以今天要重新改造一下。