最新下载
热门教程
- 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":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了打包后的目录。
相关文章
- 无期迷途主线前瞻直播总结 无期迷途主线前瞻直播内容介绍 11-22
- 以下哪种非遗技艺是用针在纸上绣画 蚂蚁新村11月21日答案 11-22
- 江南百景图听风塔怎么样 11-22
- 原神恰斯卡圣遗物怎么搭配 11-22
- 2024年霸王茶姬11月22日口令是什么 2024.11.22霸王茶姬口令介绍 11-22
- 光遇11.21季节蜡烛在哪里 光遇11月21日季节蜡烛位置攻略 11-22