vue cli 2.0实现分环境打包

vue cli 2.0实现分环境打包

1、修改config文件夹下的 test.env.js

// config文件夹下的test.env.js
'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  ENV_CONFIG:'"test"',
  BASE_API:''
})

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

2、修改config文件夹下的 prod.env.js

//config文件夹下的prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG:'"prod"',
  BASE_API:''
}

3、修改config文件夹下的 index.js 中的 build 里的代码

// config文件夹下的index.js
build: {
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    ...
    //余下代码不变
}

4、修改buil文件夹下的webpack.prod.conf.js

//buil文件夹下的webpack.prod.conf.js
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// const env = require('../config/prod.env')    
// 或者
// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/test.env')
//   : require('../config/prod.env')
//将上面注释的代码修改为：
const env = config.build[process.env.env_config+'Env'] 

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  ...
}

5、修改build文件夹下的build.js

//build文件夹下的build.js
'use strict'
require('./check-versions')()

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

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

// const spinner = ora('building for production...')   //注释掉
//增加下面一条代码
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )

spinner.start()
...

6、在 package.json 里的scripts 里面添加：

// package.json 里的 scripts 里
 "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",
    "build": "node build/build.js",
    "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

7、根据不同环境配置地址

8、安装 cross-env
npm install --save-dev cross-env

9、分环境打包

npm run build--test      //测试环境
npm run build--prod     //正式环境