Vue+webpack項目的多環境打包配置

背景：因爲須要將應用部署到線上開發環境、線上測試環境、線上預發環境、線上生產環境，而每一個環境的訪問地址是不一樣的。若是每次更改請求地址未免有些繁瑣，就考慮在本地進行一次性配置。

代碼管理工具：git

代碼分支：

1.0-dev    // 開發分支

1.0-test   // 測試分支

1.0-pre    // 預發分支

1.0         // 正式分支

應用部署服務器：阿里雲服務器

1、安裝依賴：cross-env

使用cross-env解決跨平臺設置環境變量的問題

安裝：npm i --save-dev cross-env

2、修改項目package.json文件

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src --fix",
    "build:dev": "cross-env NODE_ENV=development ENV_CONFIG=dev node build/build.js",
    "build:test": "cross-env NODE_ENV=testing ENV_CONFIG=test node build/build.js",
    "build:pre": "cross-env NODE_ENV=presentation ENV_CONFIG=pre node build/build.js",
    "build:prod": "cross-env NODE_ENV=production ENV_CONFIG=prod node build/build.js"
  },

 

如圖所示

這裏是修改打包命令，之後打包將使用如下命令：

線上開發環境：npm run build:dev
線上測試環境：npm run build:test
線上預發環境：npm run build:pre
線上生產環境：npm run build:prod

NODE_ENV=xxx ENV_CONFIG=xxx 將設置 webpack 打包時的 NODE_ENV、 ENV_CONFIG 環境變量

3、修改項目config配置文件

修改項目config目錄下的如下文件

一、 添加test.env.js文件

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  ENV_CONFIG: '"test"',
  API_ROOT: '"http://(線上測試環境請求地址)"'
}

二、添加pre.env.js文件

'use strict'
module.exports = {
  NODE_ENV: '"presentation"',
  ENV_CONFIG: '"pre"',
  API_ROOT: '"http://(線上預發環境請求地址)"'
}

三、修改dev.env.js文件

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

// 獲取NODE_ENV參數
const env = process.env.NODE_ENV

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  API_ROOT: env === 'development' ? '"http://(線上開發環境請求地址)"' : '"/api"' // dev環境配製了服務代理，API_ROOT的api是配製的代理地址
})

四、修改prod.env.js文件

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  API_ROOT: '"http://(線上生產環境請求地址)"'
}

五、修改index.js文件

因爲本地運行時會產生瀏覽器跨域的問題，在此文件中配置服務代理。

dev參數下修改以下配置：

proxyTable: {
  '/api': {
    target: 'http://(本地開發環境請求地址)',
    changeOrigin: true, // 是否容許跨域
    pathRewrite: {
      '^/api': '' // 重寫
 } },
},

 // api是配製的代理地址

以下圖所示

build參數下添加以下參數

devEnv: require('./dev.env'),
testEnv: require('./test.env'),
preEnv: require('./pre.env'),
prodEnv: require('./prod.env'),

參數名與文件名對應，此處參數將在 build/webpackage.prod.conf.js 中使用到

將 build 參數下的 assetsPublicPath 參數值修改成 ’./’

以下圖所示

config目錄結構如圖

 

4、修改項目build配置文件

修改項目build目錄下的如下文件

一、 修改build.js文件

// process.env.NODE_ENV = 'production'  // 將此行代碼註釋

// const spinner = ora('building for production...')
const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.ENV_CONFIG + ' production...')

如圖所示

二、修改utils.js文件

添加各打包環境設置

原代碼
exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}


修改後
exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'presentation'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

這裏涉及到打包和本地運行時所讀取的config/index.js文件中的assetsSubDirectory參數路徑

三、修改webpack.base.conf.js文件

添加各打包環境設置

原代碼
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },


修改後
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'presentation'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

 

四、修改webpack.prod.conf.js文件

 

原代碼
const env = require('../config/prod.env')


修改後
const env = config.build[process.env.ENV_CONFIG+'Env']

如圖所示

將會根據各打包環境設置的參數選擇讀取 config/index.js 文件下 build 參數中設置的環境配置參數，從而讀取到 config 目錄下配置的各打包環境的js文件

 

五、修改vue-loader.conf.js文件

添加各打包環境設置

原代碼：
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap


修改成：
// const isProduction = process.env.NODE_ENV === 'production'
const isProduction = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'presentation'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

 

 

5、項目中HTTP請求設置

注意符號不是單引號而是反引號

本項目中全部請求統一在api文件中管理，在js文件中獲取到各環境配置的請求地址將其添加到請求路徑中。

 

若是是直接在文件中調用可將請求地址參數掛載到Vue上進行全局調用

在main.js文件中添加

Vue.prototype.baseURL = process.env.API_ROOT

使用時請求路徑參數爲

url: `${this.baseURL}/platform/systemUser/login`

6、修改項目部署配置文件（xxx.release）

因爲項目在阿里雲發佈，建立應用發佈時會生成對應應用的部署配置文件（應用名.release）,修改文件中的打包參數。如圖

線上開發環境是單首創建的一個應用，因此在另外的應用部署配置文件中設置，設置方式相同。