vue打包之后生成一个配置文件修改接口的方法
作者:兔子先生i 时间:2024-05-29 22:45:27
前言:
我们的vue代码打包上传到服务器之后,要是数据接口 以后换了域名什么的,是不是需要重新去vue文件里修改接口。
能不能生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名,只需打开记事本 修改一下域名即可。
教程:
第一步:安装generate-asset-webpack-plugin插件
npm install --save-dev generate-asset-webpack-plugin
第二步:配置webpack.prod.conf.js文件
//让打包的时候输出可配置的文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin');
var createServerConfig = function(compilation){
let cfgJson={ApiUrl:"http://198.129.31.108:8080"};
return JSON.stringify(cfgJson);
}
//让打包的时候输入可配置的文件
//这段代码加在plugins:[]中
new GenerateAssetPlugin({
filename: 'serverconfig.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})
第三步:输入npm run build打包代码 结果如下
第四步:以后需要修改域名之类的 在serverconfig.json修改即可
第五步:获取ApiUrl
//在main.js中定义一个全局函数
Vue.prototype.getConfigJson=function(){
this.$http.get("serverconfig.json").then((result)=>{
//用一个全局字段保存ApiUrl 也可以用sessionStorage存储
Vue.prototype.ApiUrl=result.body.ApiUrl;
}).catch((error)=>{console.log(error)});
}
第六步:使用ApiUrl
//在app.vue里面 执行this.getConfigJson();
mounted:function(){
this.getConfigJson();
}
//之后...用在需要用到的地方 因为ApiUrl已经是全局了 可以直接用this.ApiUrl
var url=this.ApiUrl+'/api/....
总结
以上所述是小编给大家介绍的vue打包之后生成一个配置文件修改接口的方法网站的支持!
来源:https://www.cnblogs.com/Mrrabbit/p/7852792.html
标签:vue,打包,配置文件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
5个CSS3技术实现设计增强
2009-09-04 17:04:00
mac安装scrapy并创建项目的实例讲解
2021-05-17 21:21:05
python实现多张图片拼接成大图
2021-11-19 08:36:53
![](https://img.aspxhome.com/file/2023/8/103268_0s.jpg)
pytorch中的embedding词向量的使用方法
2022-03-25 09:05:27
Python使用scrapy采集时伪装成HTTP/1.1的方法
2023-07-07 01:28:40
利用Python实现颜色色值转换的小工具
2021-09-12 07:44:15
![](https://img.aspxhome.com/file/2023/2/133252_0s.png)
python设置表格边框的具体方法
2023-11-13 08:08:48
![](https://img.aspxhome.com/file/2023/9/107099_0s.jpg)
Python技巧之四种多线程应用分享
2021-12-04 12:11:57
python 实时得到cpu和内存的使用情况方法
2023-10-05 20:03:24
![](https://img.aspxhome.com/file/2023/1/86341_0s.jpg)
算法系列15天速成 第四天 五大经典查找【上】
2023-12-18 01:20:38
![](https://img.aspxhome.com/file/2023/9/120509_0s.png)
JSON+JavaScript处理JSON的简单例子
2023-10-09 09:39:56
详解python单元测试框架unittest
2022-05-31 23:16:58
vscode安装使用的详细教程
2022-06-10 01:15:24
![](https://img.aspxhome.com/file/2023/3/112053_0s.png)
Alfred + Gitee搭建免费图床的使用实例详解
2023-10-04 08:24:30
![](https://img.aspxhome.com/file/2023/7/117507_0s.jpg)
用表格帮你了解Python数据类型
2023-11-08 08:55:25
thinkphp框架实现删除和批量删除
2024-06-07 15:29:22
![](https://img.aspxhome.com/file/2023/4/122484_0s.jpg)
Vuex之理解Store的用法
2024-05-13 09:37:33
![](https://img.aspxhome.com/file/2023/6/125306_0s.png)
Pytorch中的Tensorboard与Transforms搭配使用
2023-07-09 08:27:05
![](https://img.aspxhome.com/file/2023/2/62022_0s.png)
Python函数之zip函数的介绍与实际应用
2022-06-02 00:52:51
![](https://img.aspxhome.com/file/2023/7/103267_0s.png)
学习 YUI3 中的沙箱机制
2010-04-12 12:52:00