Vue官方腳手架分環境打包配置

1、配置各個環境所需要的使用的引數

//修改config/dev.env.js (開發環境)
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',//環境型別
  IS_ENCRYPTION:false,//是否加密
  WS_API:'"ws://cnblogs.com/"',//websoket地址
  BASE_API:'"http:cnblogs.com/"',//開發環境地址
})

修改config/prod.env.js(生產環境)
'use strict'
module.exports = {
  NODE_ENV: '"production"',//環境型別
  IS_ENCRYPTION:true,//是否加密
  WS_API:'"wss:https://cnblogs.com/"',//websoket地址
  BASE_API:'"https://cnblogs.com/"'//生產環境地址
}

2、打包配置

修改 build/webpack.prod.conf.js(npm run build 時會走這個檔案)

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')
改為
const env = require('../config/'+process.env.env_config+'.env')

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
改為
new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

3、本地環境配置

修改 build/webpack.dev.conf.js(npm run start 時走這裡)
//引入檔案
const ENV = require('../config/dev.env');//如果需要用生產環境把../config/dev.env改為../config/prod.env即可(專案需要重啟才能生效)
plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
改為
plugins: [
    new webpack.DefinePlugin({
      'process.env': ENV
    }),    

4、打包命令配置

在package.json "scripts"物件中新增一下內容
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
"build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
"build:exam": "cross-env NODE_ENV=production env_config=exam node build/build.js"

5、獲取配置好的全域性變數

//以下變數能獲取環境中的各個引數(任何檔案下可使用該變數)
process.env