Vue2打包后文件的接口地址动态配置

最新推荐文章于 2024-05-10 17:13:03 发布
最新推荐文章于 2024-05-10 17:13:03 发布
阅读量1.3k 收藏 8
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32555123/article/details/125991588
版权

步骤一
在public文件下新建一个config.js配置全局变量

window.baseurl = "http://192.168.1.45:9999"

在这里插入图片描述

步骤二
在public文件下的index.html中引入config.js

<script src="config.js?v=<%=new Date().getTime()%>"></script>

在这里插入图片描述

步骤三
在api中使用全局变量baseURl
在这里插入图片描述

步骤四
在vue.config.js中配置打包后路径
在这里插入图片描述

结尾
以上配置结束后，npm run build生成的dist文件中的config.js便可外部动态修改baseUrl了
在这里插入图片描述

zxna
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue设置动态请求地址的例子
10-16
今天小编就为大家分享一篇vue设置动态请求地址的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2打包后，接口地址可在打包文件中配置
reembarkation的博客
01-08 908
vue2打包后，接口地址可在打包文件中配置
Vue实现打包后可修改配置文件（请求地址）
最新发布
qq_29039105的博客
05-10 545
配置成功后，打包项目后，打包文件夹下会出现一个urlConfig文件，发布前，直接更改其中的地址即可。1.同样的在public文件夹下配置urlConfig.ts，代码同上。一、在Vue2中实现。
Vue打包后文件的接口地址配置的方法
weixin_38499606的博客
10-29 7707
背景 常规的vue项目分为本地开发环境和生产环境，在实际项目中，我们在打包之前在.env文件中进行地址配置然后进行打包（vue.config.js文件在开发环境中有效，打包后无效），但在部署过程中地址是不固定的，那么就需要进行动态配置，而不是每次都重新构建代码 第一步：在public中新建config.js文件，用来配置接口地址 在config.js文件中写入 var ipConfig = { baseUrl: 'http://192.168.10.52:9999' } 第二步：在pu.
vue部署包可配置后台接口地址
C_hydar的博客
03-28 2294
vue 打包后可配置后台接口地址
Vue配置文件中的proxy中配置多个接口地址
qq_58638897的博客
11-02 3028
Vue配置文件中的proxy中配置多个接口地址
vue打包怎么在外部配置文件（端口），并可以动态访问端口地址（输入什么就访问什么）
buchishutiao的博客
02-05 2485
需求：每次修改程序会很麻烦，需要我们在打包的时候生成配置文件，直接修改文件就可以改变端口。1.首先在打包的目录static下创建config.js文件。3.还在此目录下的index.html引用config.js。但是我是在项目的更目录加的 打包完之后这里也会出现引用的。2.config.js文件内容（加双引号）4.定义全局变量global.js。5.在main.js中引用。7.打包后就可以读取了。
如何修改Vue打包后文件的接口地址配置的方法
10-15
主要介绍了如何修改Vue打包后文件的接口地址配置的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue打包之后生成一个配置文件修改接口的方法
10-17
主要介绍了vue打包之后生成一个配置文件修改接口 的相关资料,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
如何在Vue中抽离接口配置文件
10-16
在Vue项目中，抽离接口配置文件是一种良好的实践，它有助于保持代码的整洁，并使得接口地址的管理和修改更加集中和方便。以下是如何在Vue中实现这一目标的详细步骤和相关知识点： 1. **问题背景**： 在Vue项目中，...
vue打包部署到服务器，动态获取(修改)对应服务器的请求ip
m0_58622543的博客
08-24 3291
按照上述的步骤实现动态获取后，当token过期后，会触发一个重新登录的操作，当用户点击重新登录后，跳转登录页面，这时window.VITE_BASE_URL就获取不到了(判断时路径重定向后，清除了写入window的对象)，会导致请求接口地址错误。vue打包后的文件要部署到不同的服务器上，ip不同，每次部署都要修改对应服务器的ip后打包上线，所以会出现频繁打包的情况。2.在输入网址后就获取到网址栏的IP，还是在public文件夹里面添加一个js文件，index.html引入该文件。3.同思路1-第四步。
vue设置公有全局的后台服务器ip(接口调用)
XUELUO123456789的博客
12-06 4361
一.需求 在开发过程中，有时前端连接后台时，并不是一个后台，而是很多，即后台有分工。 那如果在项目上线时，我需要修改调用接口时连接的后台服务器，该怎样修改，此时页面中存在很多个ip地址+接口地址 思路1： ————笨办法：挨个挨个的修改每一个接口连接的ip，直到完成为止 ————————缺陷:那如果以后还需要修改后台ip呢，仍然还是这样一对一修改？？？？——太麻烦了 思路2: ————设置全局ip...
vue 请求拦截器响应拦截器添加Loading... 工具函数
weixin_44040867的博客
08-14 1867
import axios from 'axios'; import { Message, Loading } from 'element-ui'; //项目已经全局引入element的话可以不单独引入 import Cookies from 'js-cookie'; import router from '@/router/index' let loading //定义loading变量 function startLoading() { //使用Element loading
小白也能看的懂，vue2使用Router进行路由配置？
如果相遇，那么你好哦~
08-18 1352
总所周知，使用vue所开发出来的程序通常是单页面应用程序，这是现代web应用程序开发的重要方式。而这种单页面方式主要是通过路由（router）来支持与实现。单页面应用（SPA：single-page application），就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的web应用程序。” -- from 百度百科路由的本质是一种对应关系，根据不同的url请求，返回所对应的不同资源。这样url和资源就有一种一一对应的关系，这就是路由。
Vue2 系列：vue.config.js 参数配置
weixin_64684095的博客
06-29 9215
注意：其值应该是一个对象，对象的 key 是入口的名字，value 是：1.一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；说明：部署应用包时的基本 URL，例：https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/说明：放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。默认值：'index.html'
Vue项目登录页面接口搭建并跳转主页
weixin_43288858的博客
05-18 3812
22222
vue打包之后，可以进行修改配置后端地址、端口等信息方法
用心,承载未来
04-12 5402
用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是，难道我们只是改个接口地址也要重新打包吗？当然不行了，那就太麻烦了，怎么解决呢？本文推荐俩种方式。
Vue2添加API接口地址修改配置文件的方法[艾思软件]
赵吉平的专栏
09-03 1623
在Vue的项目环境部署中, 经常遇到, Vue的的API接口地址需要修改的情况, 默认情况下, Vue打包后就没办法修改了, 修改一下就需要重新打包, 这给运维人员和开发人员都带来很多不开森. 添加个配置文件, 让运维人员随时修改接口地址是非常必要的. 可以经过下面简单几步实现
如何修改vue3打包后文件的接口地址配置
09-06
要修改Vue3打包后文件的接口地址配置，一般可以使用以下步骤： 1. 打开Vue3项目中的配置文件，通常为`vue.config.js`或`webpack.config.js`。如果项目中没有该文件，可以手动创建。 2. 在配置文件中，找到与接口地址相关的配置项。通常是一个名为`devServer`或`proxy`的属性。 3. 修改该配置项的`target`属性，将其设置为新的接口地址。例如，如果原本的接口地址为`http://localhost:3000/api`，要修改为`http://example.com/api`，则可以将`target`设为`http://example.com`。 4. 保存配置文件，并重新运行项目的打包命令。根据项目使用的构建工具不同，打包命令可以是`npm run build`、`yarn build`或其他。 5. 打包完成后，生成的打包文件中的接口地址将会被修改为新的地址。 注意事项： - 如果在开发环境下需要配置接口代理，可以在配置文件中添加`changeOrigin: true`来解决跨域问题。 - 需要确保新的接口地址是可用的，并且与前端项目的需求相匹配。 - 如果项目使用的是Vue CLI进行构建，也可以在`vue.config.js`中的`configureWebpack`属性中设置Webpack的相关配置，如`output`的`publicPath`来修改打包后文件的接口地址配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值