最新下载
热门教程
- 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.7每日任务怎么做 11-07
- 英雄联盟双城之战2主题曲怎么样 11-07
- 《怪物猎人荒野》锁头机制介绍 11-07
- 逆水寒手游流派首席竞选怎么玩 逆水寒手游流派首席竞选玩法介绍 11-07
- 《怪物猎人荒野》双刀玩法介绍 11-07
- 《怪物猎人荒野》帐篷搭建方法 11-07