vue项目输出可配置文件

一  安装generate-asset-webpack-plugin插件

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

二 配置webpack.prod.conf.js和webpack.dev.conf.js（以下代码都要贴入文件中）

const GenerateAssetPlugin = require('generate-asset-webpack-plugin'); const createServerConfig = function(compilation){  let cfgJson={ApiUrl:"http://www.baidu.com",ShareUrl:"http://www.sougou.com"};  return JSON.stringify(cfgJson);}

new GenerateAssetPlugin({      filename: 'serverconfig.json',      fn: (compilation, cb) => {          cb(null, createServerConfig(compilation));      },      extraFiles: []    })

三 测试npm run build输出dist中是否含有serverconfig.json文件

四 进入main.js中获取serverconfig.json文件中数据并保存到缓存中提供给各个组件中使用

const getGlobalApiUrl = () => {    // 如果是开发环境， 那就不去读 serverconfig.json    // if (process.env.NODE_ENV !== 'production') return    axios.get('serverconfig.json').then((result) => {        localStorage.setItem('ApiUrl', result.data.ApiUrl)        localStorage.setItem('ShareUrl', result.data.ShareUrl)    }).catch((error) => {        console.log(error)    })}

五 进入App.vue后，在钩子函数中调用即可

mounted () {        this.getConfigJson()    }