基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

npm install --save-dev generate-asset-webpack-plugin

// 这段代码在配置文件开头
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 =  .assign({ _hash: compilation.hash}, env)
 //Step2:去除配置文件中的引号
  .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: []
  })

{
 \"_hash\": \"52f44b45b5b600b7f36e\",
 \"NODE_ENV\": \"production\",
 \"ENV_CONFIG\": \"sit\",
 \" _API\": \"http://*****/APIPlateForm/\",
 \" _ADDR\": \"http://****/\",
 \"REPORT_ADDR\": \"******\"
}

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. _API)
 axios.defaults. URL = Vue.prototype. _API;//axios 的基础地址从配置文件读取
 new Vue({
  el: \'#app\',
  router,
  store,
  template: \'<App/>\',
  components: { App }
 })
}
// 方法初始执行
main();

  handleWatchLib(linurl) {
    window.open(this. _ADDR + linurl);
    return false;
   }