VUE在webpack后动态修改配置文件(亲测有效 放心借鉴~)

webpack vue项目动态修改配置文件

前言

😑😑😑开始之前,请允许我好好吐槽一下😑😑😑 本想借鉴一下各路神仙的一些骚操作来达到目的,但是结果令人失望之极,千篇一律,关键是方案完全起不到作用,也不清楚为什么还有那么多的人在转载这种方法,感觉有点误人😮😮😮😮

🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬🤬

需求

vue项目在build编译后,通过外部配置文件(如config.json)动态修改打包后项目内的API地址

项目环境

vue-cli:vue-cli + 4.5.6
vue:vue + 2.6.11
axios:axios + 0.24.0

实现

  1. public目录下,创建config.json,在config.json中设置自己的配置参数,vue在build编译时会将此文件复制到根目录下。
// public/config.json
// 根据自己需要随意配置
{
	"BASE_URI": "http://xxx.com.cn",
	"BASE_API_URL": "http://xxx.com.cn/api",
}
  1. src/main.js中利用axiosaxios获取config.json数据,本人是将获取的配置参数存储在localStorage中,方便随时使用。
 // src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

/*! 新增获取配置文件中信息 ----- start !*/
// 注意这里路径问题,如果config.json在public下,则路径为 /config.json,因为build后config.json在更目录下
axios.get('/config.json').then(res => { 
	localStorage.setItem('ApiUri', res.data.BASE_API_URL)
})
/*! 新增获取配置文件中信息 ----- end !*/

new Vue({
	router,
	store,
	render: h => h(App),
}).$mount('#app')

最后在自己项目的http请求中统一处理,本人使用的是axios,此文也以此为例

// http.js
// 具体项目位置请自行决定,只要在项目中的接口请求统一封装处在处理即可
import axios from "axios"

let _axios = axios.create({
    baseURL: process.env.VUE_APP_MODE === 'prod' ? localStorage.getItem('ApiUrl') : process.env.VUE_APP_BASE_API,
    headers: {
        'Accept': 'xxxx'
    }
})

...
// 剩余为自己HTTP请求处理代码
...

项目build部署后,只需修改dist目录下的config.json,然后重新加载项目,最好能重新打开,因为获取配置参数实在vue入口处执行的。

这样我们就不需要在部署项目时,因API地址改变而频繁的重新build编译项目了

在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Bennett_G

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值