vue项目打包生成可配置文件

最近公司有个大屏项目，一套代码需要提供给不同的项目使用，频繁更换监控点ID，改一次，打包一次，次数多了，就炸毛了要，所以目的是实现打包后的代码可提供一个配置文件，实现测试人员修改配置后，可直接部署项目，无需打包。

第一步： 安装generate-asset-webpack-plugin插件

generate-asset-webpack-plugin

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

第二部： ./static目录下添加配置文件

我这里是 paramConfig.json

第三部： 修改配置文件

打开 ./build/webpack.prod.conf.js 添加下面代码

//引入依赖
const GeneraterAssetPlugin = require('generate-asset-webpack-plugin')

//引入配置文件
const paramConfig = require('../static/paramConfig') //监控点配置
const createJson = function(compilation) {
  return JSON.stringify(paramConfig);
}

//在 plugins 内添加
   new GeneraterAssetPlugin({
     filename: utils.assetsPath('static/paramConfig.json'), //配置文件存放地址：打包后的 static 文件夹内，注意和 config/index.js 内的打包文件名字相同
     fn: (compilation, cb) => {
       cb(null, createJson(compilation));
     }
   })

第四部： 在 main.js 内添加代码获取配置信息

// 请求文件内容
function getServerConfig() {
	return new Promise((resolve, reject) => {
		axios.get('./static/paramConfig.json').then(result => {
			console.log(result)
			let config = result.data;
			for (let key in config) {
				Vue.prototype[key] = config[key];
			}
			resolve();
		})
	})
}

// 请求文件内容及创建实例
async function main() {
	await getServerConfig();
	new Vue({
		router,
	}).$mount('#app')
}
// 方法初始执行
main();

最后

打包, 可在 /dist/static 内看到自己的配置文件

npm run build

参考文档：

1. vue+webpack实现vue打包后生成配置文件用以外部修改公共路径
2. vue项目打包生成配置文件