vue打包之后生成一个配置文件方便运维修改配置

首先安装插件 add-config 6-1

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

//让打包的时候输出可配置的文件 vue.config.js 文件里 add-config 6-2
var GenerateAssetPlugin = require('generate-asset-webpack-plugin');
var createServerConfig = function(compilation){
  let cfgJson={processId:"4"};
  return JSON.stringify(cfgJson);
}

configureWebpack: {
   // vue.config.js 文件里 ...............
  //add-config 6-3
    plugins: [
    new GenerateAssetPlugin({
      filename: 'serverconfig.json',
      fn: (compilation, cb)=>{
        cb(null, createServerConfig(compilation));
      },
      })
    ],
},

import axios from 'axios';
//在main.js中定义一个全局函数  add-config 6-4
Vue.prototype.getConfigJson=function(){
  axios.get("serverconfig.json").then((result)=>{
    //用一个全局字段保存ApiUrl  也可以用sessionStorage存储
    console.log(result.data);
    Vue.prototype.WebAppConfig=result.data;
  }).catch((error)=>{console.log(error)});
}

created() {
  //app.vue add-config 6-5
  this.getConfigJson();
 },

//ok 可以用了 add-config 6-6
console.log('WebApp_ ',this.WebAppConfig) ;
if(this.WebAppConfig){
  console.log('WebApp_processId',this.WebAppConfig.processId) ;
}

实际使用发现有时候6-6先执行，6-5后执行，所以就在6-6的页面的created里再执行一次

vue-element-admin 4.2.1工程调试通过