基於Vue-Cli 打包自動生成/抽離相關配置文件

背景

• 基於Vue-cli 項目產品部署，涉及到的交互的地址等配置信息，每次都要從新打包才能生效，極大的下降了效率。咱們的目的是讓項目實施的小夥伴從新快樂起來。網上實現的方式，都是半自動化的，還須要從新修改。

需求點

• 配置化：打包後的配置文件可二次修改
• 配置自動生成：vue-cli 提供了各類環境的打包，要實現相關配置文件的自動打包
• 研發人員無痛感：對於產品研發人員來講，不須要增長額外的打包成本，基於Vue-cli的開發習慣不變。

實現步驟

一：配置自動生成

• 安裝generate-asset-webpack-plugin插件。用於配置文件自動生成。

npm install --save-dev generate-asset-webpack-plugin
複製代碼

• 配置webpack.prod.conf.js文件.新增以下代碼

// 這段代碼在配置文件開頭
var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); //Add:Strony;Date:2018年12月7日
const env = require('../config/' + process.env.env_config + '.env')
// 打包後配置文件：新增 2018年12月7日;Strony
var createServerConfig = function (compilation) {
  //Step1:先複製原對象
  var parseEnv = Object.assign({ _hash: compilation.hash}, env)
  //Step2:去除配置文件中的引號
  Object.keys(parseEnv).forEach(function (key) {
    parseEnv[key] = parseEnv[key].replace(/"/g, ""); }); return JSON.stringify(parseEnv, null, 2); } 複製代碼

// 這段代碼加在plugins:[]中
 new GenerateAssetPlugin({
      filename: utils.assetsPath('../static/serverConfig.json'),
      fn: (compilation, cb) => {
        cb(null, createServerConfig(compilation));
      },
      extraFiles: []
    })
複製代碼

• 輸入npm run build:prod 打包命令.vue-cli 默認提供了幾個環境的打包環境：早期版本直接：npm run build

  

  結果以下：

  

• 生成的配置文件樣式以下：

{
  "_hash": "52f44b45b5b600b7f36e",
  "NODE_ENV": "production",
  "ENV_CONFIG": "sit",
  "BASE_API": "http://*****/APIPlateForm/",
  "BASE_ADDR": "http://****/",
  "REPORT_ADDR": "******"
}
複製代碼

二：全局變量從配置文件讀取

1. 增長serverConfig.json。目的是開發人員本地開發時候，能夠從配置文件讀取。內容Copy本地的dev.env.js.住裏面的格式爲json，去除多餘的引號。

   

2. 在main.js中添加下面的代碼。目的：讀取配置地址掛載在全局對象

import axios from 'axios'
/* eslint-disable no-new */
// 請求文件內容
function getServerConfig() {
  return new Promise((resolve, reject) => {
    axios.get('./static/serverConfig.json').then(result => {
      console.log(result)
      const config = result.data;
      for (const key in config) {
        Vue.prototype[key] = config[key];
      }
      resolve();
    })
  })
}
// 請求文件內容及建立實例
async function main() {
  await getServerConfig();
  console.log('個人地址是' + Vue.prototype.BASE_API)
  axios.defaults.baseURL = Vue.prototype.BASE_API;//axios 的基礎地址從配置文件讀取
  new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: { App }
  })
}
// 方法初始執行
main();
複製代碼

3.項目執行：npm run dev。在瀏覽器的控制檯下能夠查看到相關的配置信息

4.使用方法：在vue文件中，直接訪問使用各種地址信息。

handleWatchLib(linurl) {
        window.open(this.BASE_ADDR + linurl);
        return false;
      }
複製代碼

參考文獻

• vue打包以後生成一個配置文件修改接口
• vuevue-cli2.x版本打包修改公用路徑及配置