最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
时间:2022-06-25 15:22:32 编辑:袖梨 来源:一聚教程网
第一步 安装插件
npm install --save-dev generate-asset-webpack-plugin
第二步 新建配置文件
在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件
{"ProdUrl":}
第三步 引入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了打包后的目录。
相关文章
- 使命召唤黑色行动6动画师任务攻略 11-02
- 使命召唤黑色行动6失踪人员任务攻略 11-02
- 使命召唤黑色行动6敏锐的眼睛任务攻略 11-02
- 龙腾世纪4影障守护者终极技能解锁方法 11-02
- 介绍自已特长的短句话选录76条 11-02
- 龙腾世纪4影障守护者技能强化作用说明 11-02