vue项目接口域名动态的获取方法

这篇文章主要介绍vue项目接口域名动态的获取方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强>需求:

接口域名是从外部. json文件里获取的。

<强>思路:

在开始加载项目前进行接口域名获取,然后重置接口域名的配置项。

<强>实现:

1,配置/索引。js文件进行基础配置

从& # 39;进口axios axios& # 39;
　　
　　常量配置={
　　requestUrl: & # 39; http://qiniu.eightyin.cn/path.json& # 39;//动态域名所在地址
　　baseUrl: {
　　戴夫:& # 39;/api/& # 39;
　　正方观点:& # 39;http://xxx.com/& # 39;//接口域名,会被动态覆盖
　　},
　　
　　requestRemoteIp:()=比;{//动态获取
　　返回新的承诺((解决,拒绝)=比;{
　　axios.get (config.requestUrl)。(反应=比;
　　{
　　
　　config.baseUrl。箴=response.data.data.path;
　　config.img。域=config.baseUrl.pro;
　　解决()
　　},呃=比;{
　　拒绝()
　　}）；
　　}）；
　　}
　　}
　　
　　出口默认配置

2项目下主要。js文件进行动态获取

进口配置& # 39;@/config/index.js& # 39;//读取接口域名
　　config.requestRemoteIp ()。最后(res=比;{/* eslint-disable没有新*/新Vue ({
　　艾尔:& # 39;#应用# 39;
　　
　　路由器,
　　组件:{应用},
　　模板:& # 39;& lt;应用程序/祝辞& # 39;
　　}）
　　});

3,请求数据

=axios.create ({const实例
　　baseURL: process.env。NODE_ENV===& # 39;发展# 39;,# 63;config.baseUrl.dev: config.baseUrl.pro
　　})

<>强webpack + vue打包生成公共配置文件(域名)方便动态修改

<强>需求原因

原来的项目中域名是打包到项目里面的,打包后不能动态配置,只能通过不同的指令打包来切换域名,每天都在测试域名和正式域名来回摩擦,后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好,于是就有了这篇文章。

<强>第一步安装插件

npm安装——save-dev generate-asset-webpack-plugin

<强>第二步新建配置文件

在项目的根目录下新建serverConfig。json以后会根据这个文件去生成打包的配置文件

{“ProdUrl":“http://text.com"}

<强>第三步引入generate-asset-webpack-plugin

在构建/webpack.prod.conf。js中添加

 axios.get (& # 39; serverConfig.json& # 39;)。然后(e=比;{
　　让baseURL=e.data.ProdUrl
　　localStorage.setItem (“baseURL" baseURL);
　　新Vue ({
　　艾尔:& # 39;#应用# 39;
　　路由器,
　　商店,
　　i18n,
　　呈现:h=比;h(应用)
　　}）
　　})

由于是使用axios获取,是异步方法,根据情况进行处理,

好了接下来就再也不用为了域名每天建立了

打包后的目录

以上是vue项目接口域名动态的获取方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

vue项目接口域名动态的获取方法