webpack + vue 打包生成公共配置文件（域名） 方便动态修改
时间：2020-12-08 22:28:15|栏目：vue|点击： 次
需求原因
原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好，于是就有了这篇文章。
第一步 安装插件
npm install --save-dev generate-asset-webpack-plugin
第二步 新建配置文件
在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件
{"ProdUrl":http://text.com}
第三步 引入generate-asset-webpack-plugin
在build/webpack.prod.conf.js中添加
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('../serverConfig.json')；//引入根目录下的配置文件
const createJson = function() {
return JSON.stringify(serverConfig);
};
//plugins 中使用
plugins: [
//打包时生成一个配置文件
new GenerateAssetPlugin({
filename: 'serverConfig.json',
fn: (compilation, cb) => {
cb(null, createJson());
},
}),
]
第四步 使用配置文件中的内容
这里根据不同项目不同需求代码自行变换，我分享一下我的项目里的使用，项目中封装了axios，并对请求拦截做了处理
service.interceptors.request.use(
async (config) => {
var baseURL = process.env.BASE_API
if(process.env.NODE_ENV === "production"){
await axios.get('serverConfig.json').then( e => {
baseURL = e.data.ProdUrl
})
}
config.baseURL = baseURL
if (store.getters.token) {
// 让每个请求携带token
config.headers["X-Token"] = getToken();
config.headers = {
"X-Token": getToken(),
"Content-Type": "application/json-patch+json"
};
}
return config;
},
error => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
}
);
变黄的部分则是获取配置文件的方法，由于是使用axios获取，是异步方法，根据情况进行处理。、
好了接下来就再也不用为了域名每天build了
打包后的目录
总结
