Vue配置调试环境和发布环境

在项目完成后，后期维护阶段往往需要对项目不断进行功能扩充，这个过程中就需要支持内测版本和发布版本分开进行调试或打包。这里的内测版本是指：包含所有已经完成或正在开发中的功能；发布版本是指：仅仅所有已经完成的功能；

初始化一个webpack的Vue项目,vue init webpack my-project,生成如下文件：

Vue-webpack项目初始结构

我们要实现的目标是，执行以下命令，能够直接调试或者打包指定的版本

npm run start:dev        //调试dev版本
npm run start:prod      //调试prod版本
npm run build:dev      //打包dev版本
npm run build:prod    //打包prod版本

1、创建build/webpack.env.conf.js

用于获取命令行中env参数的值，设置打包编译时调用对应的版本。
安装npm install yargs --dev --save,通过yargs可以方便的获取指定名称的命令行参数。

// 定义参数配置
const argv = require('yargs').argv;

// 获取环境变量
const env = argv.env;
//process.stdout.write('the env is ' + env + '\n');

// require指定的环境配置文件
const envConfigFile = "../config/" + env + ".env.js";
//process.stdout.write('the env config file is ' + envConfigFile + '\n');

// 将require的配置文件原封不动export回出去
module.exports = require(envConfigFile);

2、修改wepack.base.conf.js

由于webpack.dev.conf.js和webpack.prod.conf.js都是继承自webpack.base.conf.js，所以我们直接改写wepack.base.conf.js的插件配置部分。

• 简单的来说就是DefinePlugin插件会将我们源码中所有出现的指定字符串替换为我们提供的对象/字符串，不同环境的配置文件则放在/config目录下。

// 引入上面的webpack.env.conf模块
const envConfig = require('./webpack.env.conf')
module.exports = {
  ...
  ,
  // 配置DefinePlugin插件
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': envConfig
    })
  ],
  ...
}

3、修改webpack.dev.conf.js和webpack.prop.conf.js

由于webpack.dev.conf.js和webpack.prop.conf.js这两个文件，都采用merge方法继承了wepack.base.conf.js中的plugins属性，所以自身就不用再设置，否则会覆盖base中的设置，所有找到dev.conf和prod.conf中的new webpack.DefinePlugin，将其注释掉。webpack.dev.conf.js文件

plugins: [
    // new webpack.DefinePlugin({
    //   'process.env': require('../config/dev.env')
    // }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),

webpack.prod.conf.js文件

plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    // new webpack.DefinePlugin({
    //   'process.env': env
    // }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },

4、修改package.json

"scripts": {
    "start:debug": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env dev",
    "start:prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env prod",
    "build:debug": "node build/build.js --env dev",
    "build:prod": "node build/build.js --env prod"
  },

5、组件中调用当前环境值

执行npm run build:prod,则可以在组件任意代码中通过process.env.NODE_ENV,取到环境变量值：prod

备注：如果版本不止dev和prod两个，还有dev2、dev3、dev4等等，那也很好处理，只需要复制dev.env.js，修改NODE_ENV属性；再修改package.json就行。

//dev2.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"dev2"'
})

//package.json
"scripts": {
    "start:dev2": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env dev2",
    "build:dev2": "node build/build.js --env dev2"
  },

---

如果想要把不同的版本打包到不同的目录中，如下操作：

• 修改config/index.js,修改build那一部分的代码，其他不变

const envConfig = require('../build/webpack.env.conf')

module.exports = {
  dev:{...},
  build: {
    //如果需要通过打包不同的环境变量，打包到不同的文件夹可以这样写
    index: path.resolve(__dirname, '../dist_' + eval(envConfig.NODE_ENV) + '/main.html'),
    assetsRoot: path.resolve(__dirname, '../dist_' + eval(envConfig.NODE_ENV)),

    // Template for index.html
    //index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    //assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

• 修改build/build.js

'use strict'
require('./check-versions')()

// process.env.NODE_ENV = 'production'//注释掉

const ora = require('ora')
const rm = require('rimraf')

参考：Webpack下多环境配置的思路vue分别打包测试环境和正式环境理解webpack之process.env.NODE_ENV详解(十八)