vue3项目打包上线后,如何配置api接口地址,省去更换api再次打包

已于 2024-03-06 08:45:13 修改
阅读量1.7k 收藏 3
点赞数 5
分类专栏： vue3 文章标签： 前端 javascript vue.js
于 2024-03-06 08:41:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Gik99/article/details/136495347
版权

vue3项目打包上线后,如何配置api接口地址,省去更换api再次打包

一、项目根目录下public文件夹创建static=>config.js文件

window.webConfig = {
   
  //动态配置api(用于上线后更改api)
  webApiBaseUrl: 'xxx',//基础接口地址
}

二、项目根目录下public文件夹index.html页面

<script src=
最低0.47元/天 解锁文章
如何在Vue打包后修改文件中的接口地址配置
PixelInk的博客
09-26 1501
然而，当我们将Vue项目打包部署到生产环境时，需要修改打包后的文件中的接口地址，以连接到正确的服务器。接下来，我们需要在打包后的文件中修改接口地址配置。需要注意的是，每次打包Vue项目时，都需要进行上述的修改步骤。因此，在开发过程中，我们可以使用环境变量或配置文件来动态地设置接口地址，以便在不同的环境中自动切换接口地址。接下来，将修改后的文件和其他打包后的静态文件部署到生产环境的服务器上。通过以上步骤，我们成功地修改了Vue打包后文件中的接口地址配置。在这个文件中，我们需要查找并修改包含接口地址的代码。
【Vue项目实战】vue.js2.5 饿了么APP（1）概述+项目准备
小陈的博客
05-12 4293
一、概述 1. 项目简介 使用vue.js vue是当前最火的MVVM框架，（优点：轻量、简洁、高效、数据驱动、组件化） 本项目做的是：高仿上线外卖APP商家模块 开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包 以线上生产环境来开发：代码开发及测试环节：UI标注完美还原设计图、以真实外卖APP数据做演示，以保证代码无兼容性问题。 代码规范： （1）架构设计；（2）组件抽象；（3）模块拆分；（4）代码风格统一；（5）JS变量命名规范；（6）CSS代码规范；致力于编写高可维护，
vue3项目vite.config.js配置“代理”、“端口”、“打包名”、“图片压缩”
bestyinjun的专栏
07-21 6930
vue3项目vite.config.js配置“代理”、“端口”、“打包名”、“图片压缩”
vue2、vue3配置IIS的URL重写
最新发布
橙-极纪元-JJYCheng
02-14 642
vue2、vue3配置IIS的URL重写
vue3项目打包后，在打包文件中修改接口的配置
reembarkation的博客
01-08 1795
vue3项目打包后，在打包文件中修改接口的配置
vue3打包接口地址(ip)可配置，全局暴露接口地址(ip)
King的博客
06-17 1904
在vue3中打包后，设置接口地址(ip)可配置。
vue2打包后，接口地址可在打包文件中配置
reembarkation的博客
01-08 1063
vue2打包后，接口地址可在打包文件中配置
Vue打包后生成一个可修改接口地址的配置文件
林中明月间丶
10-08 2859
先给几个参考： https://blog.csdn.net/cccdf_jjj/article/details/99593533vue2.0中实现打包后可配置接口地址 https://blog.csdn.net/qq_41409679/article/details/84878642?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth..
项目总结：vue.js2.5饿了么APP（1）概述+项目准备
Sabrina_cc的博客
06-05 4636
一、概述 1. 项目简介 使用vue.js vue是当前最火的MVVM框架，（优点：轻量、简洁、高效、数据驱动、组件化） 本项目做的是：高仿上线外卖APP商家模块 开发过程：需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译打包 以线上生产环境来开发：代码开发及测试环节：UI标注完美还原设计图、以真实外卖APP数据做演示，以保证代码无兼容性问题。 代码规范：（1）架构设计；（2）组件抽象；（3）模块拆分；（4）代码风格统一；（5）JS变量命名规范；（6）CSS代码规范；致力于编写
VUE基础构建整个项目的全流程！含git基础操作（本人超细心整理，适合VUE小白）
fgdgdf的博客
11-03 1668
这个以前我刚学完前端基础知识后，第一次接触vue轻量框架做的笔记，小白跟着它 be patient 慢慢看看，再自己做个项目慢慢琢磨，会有不少收获。（这个把一个普通css html js 写的项目换成vue的格式的笔记） 刚开始这样跟着做，可能会很僵硬，但是做多几次项目，你就会自然而然发现里面一些原理啦，就能自己写啦 【个人也比较喜欢用axios进行数据获取，还有可以很方便得用共同模块，循环dom...
springboot+vue医患档案管理系统毕设完整源码+文档
05-30
1. SpringBoot的自动配置：通过@SpringBootApplication注解启动自动配置，省去了大量XML配置。 2. Vue组件化：通过组件复用提高代码可维护性，如患者档案组件、就诊记录组件等。 3. Vue Router的动态路由：实现视图...
如何修改Vue打包后文件的接口地址配置的方法
10-15
主要介绍了如何修改Vue打包后文件的接口地址配置的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE实现打包后接口地址可配置
xkuzhang的博客
09-21 4383
开发环境 win10/ubuntu18.04 vue 2.6.11 问题描述 vue 项目运行npm run build之后，把后台接口地址一起打包成静态文件中了，如果ip/地址变了要重新打包，如果是要运行在多个主机上则每个主机都要build一遍，这移植性太差了，接口地址可配置太重要了。 网上找了很久都没找到都没找到方法解决 在vue项目的/public目录下，创建config.js文件，然后引用config.js配置的地址，打包后config.js文件的确没被打包 But，放到服务器上的时候修改con
vue 打包完后的项目配置接口地址
榴莲不好吃的专栏
06-25 9776
1.在根目录新建一个environment.js文件. (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' &...
VUE2.0项目实现打包后接口地址可配置
hy111的博客
11-15 1100
Vue2.0项目实现打包后接口地址可配置
Vue打包后文件的接口地址配置的方法
weixin_38499606的博客
10-29 7985
背景 常规的vue项目分为本地开发环境和生产环境，在实际项目中，我们在打包之前在.env文件中进行地址配置然后进行打包（vue.config.js文件在开发环境中有效，打包后无效），但在部署过程中地址是不固定的，那么就需要进行动态配置，而不是每次都重新构建代码 第一步：在public中新建config.js文件，用来配置接口地址 在config.js文件中写入 var ipConfig = { baseUrl: 'http://192.168.10.52:9999' } 第二步：在pu.
vue3vite打包后更改接口地址
weixin_63438333的博客
09-06 2090
v3的index.html虽然不在public下但是打包后会在public下生成一个index.html。项目上线后后续可能会有更改接口的需求不能再次打包死在打包文件内，1.首先把接口根路径写到一个不会打包的文件内，2.然后在接口封装处把接口地址动态传给axios。我们不想让文件被打包就不写type="module"，然后在引入配置文件时注意src="./webconfig.js"路径中不能有public。因为打包后webconfig.js和index.html平级都在打包文件内。在自己封装的接口文件中。
Vue项目打包后修改后台接口地址
admin_rdc
06-29 1432
【代码】Vue项目打包后修改后台接口地址
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Gik99

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

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

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

打赏作者

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

抵扣说明：

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

余额充值