Vue打包后生成一个可修改接口地址的配置文件

先给几个参考：

https://blog.csdn.net/cccdf_jjj/article/details/99593533  vue2.0中实现打包后可配置接口地址

https://blog.csdn.net/qq_41409679/article/details/84878642?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param vue2.0中实现打包后可配置接口地址

https://www.jianshu.com/p/d11fb8dc10f3  这个是vue3.0的(vue中实现打包后可配置接口地址)

感谢

再来贴我自己的代码：

(普通版)第一步：在 static 静态文件中新建一个 serverconfig.js 文件，js 代码如下：

window.global_url = {
	Base_url: "https:www.rioyi.com:50000/inhouse" 
};

注意是src下面的static文件夹 不是打包后dist里面的！

vue-element-admin 在Public文件夹下面创建static文件夹，js代码跟上面一样

 创建config文件夹

window.config = {
  VUE_APP_BASE_API: 'http://157.148.74.18:8010'
}

第二步：在 未打包的 index.html 中引入 static 文件夹下的 serverconfig.js 文件 （vue-element-admin：public/index.html）

<script src="./static/serverconfig.js"></script>

第三步：在需要的地方使用：(我是在单独的https里面或者main.js里面) （vue-element-admin：request.js中引入）

var serverbaseUrl = window.global_url.Base_url;//生成一个可以修改服务器地址的配置文件
console.log(serverbaseUrl,'serverbaseUrl')

axios.defaults.baseURL = serverbaseUrl; //修改为配置的地址

第四步：打包生成

在我们打包之后 可以看到 config 文件会原样输出并没有被打包，部署人员可以直接通过该文件来修改config.js里面的接口地址就可以啦！

https://www.jianshu.com/p/d11fb8dc10f3  这个是vue3.0的(vue中实现打包后可配置接口地址)

最后

以上就是醉熏方盒为你收集整理的Vue打包后生成一个可修改接口地址的配置文件的全部内容，希望文章能够帮你解决Vue打包后生成一个可修改接口地址的配置文件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。