Vue打包成dist文件后修改ip地址方法

最新推荐文章于 2024-05-15 00:37:59 发布
最新推荐文章于 2024-05-15 00:37:59 发布
阅读量4.6k 收藏 15
点赞数
分类专栏： Vue-基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alo_ne/article/details/107783481
版权

为了方便把代码发给别人去部署 所以需要进行修改相应 的ip地址
此时就需要给出配置接口去修改
步骤一：
在public中创建一个config.js文件
在这里插入图片描述
之后引入所有可能改变的代码 放在windows下
在这里插入图片描述
步骤二：
在index.html中引入
在这里插入图片描述
script标签引入
在这里插入图片描述
步骤三：
可以直接使用了
在这里插入图片描述
特别提醒：如果是放在dom中直接使用
不可以直接这么写
在这里插入图片描述
需要在脚本中引用
在这里插入图片描述

alo_ne
关注
  • 0
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何修改Vue打包后文件的接口地址配置的方法
10-15
主要介绍了如何修改Vue打包后文件的接口地址配置的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli3项目打包后自动化部署到服务器的方法
01-18
一、安装 scp2 ...client.scp('./dist/', { // 本地打包文件的位置 host: 'XXX.XX.XX.XXX', // 服务器的IP地址 port: 'XX', // 服务器端口， 一般为 22 username: 'XXX', // 用户名 password:
vue 项目打包之后进行修改配置后端 IP 地址、端口等信息方法
CSDN_33901573的博客
05-11 8485
用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是，我们只是改个接口地址也要重新打包那就太麻烦了。怎么解决呢？方法如下，本文推荐俩种方式。
Vue项目的打包方式（生成dist文件）
最新发布
2401_84152140的博客
05-15 581
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue build打完包 生成配置文件，以外部外部修改公共ip路径
老段的CSDN的博客
03-07 633
1、第一步：在dist里边创建一个xxx文件夹和一个xxx.js文件 2、第二步:在创建好的js文件里边创建几个变量 3.第三部在dist里边引入这个js文件路径 4、在之前封装写的ip路径那边改一下 改成这样 这样打完包之后 在dist里边能看到刚才创建的js文件，这样其他人就可以更改ip路径了
vue2项目打dist包后更换接口地址
weixin_49682182的博客
03-20 1092
vue2项目打dist包后更换接口地址
vue-cli打包后怎么修改服务器地址实践有效
zhouzuoluo的博客
03-01 2877
前言：公司vue项目使用 npm run build 打包生成dist文件部署后，当需要修改服务器端地址时候就又需要重新配置url并打包部署，为简化部署测试工作，想实现通过修改服务器地址的配置文件来实现修改打包后的项目服务器地址。 项目基于vue-cli2搭建测试，下面是实现步骤： 1、在static文件夹下创建配置文件 serverconfig.json，服务器地址信息 { ...
解决vue打包项目后刷新404的问题
08-27
总之，解决Vue打包后刷新404的问题主要是通过正确配置服务器，确保所有请求都能导向Vue应用的入口HTML文件，让前端路由有机会处理路由跳转。通过理解这一机制，你可以更好地管理和部署Vue应用，提供更流畅的用户体验...
Vue+Koa2 打包后进行线上部署的教程详解
12-11
综上所述，将Vue+Koa2应用部署到线上涉及Vue的打包、Nginx的配置以及使用Pm2管理进程。确保每个环节都正确设置，才能确保应用的稳定运行。在实际操作中，可能还会遇到其他问题，如安全设置、日志管理等，这些都是...
vue项目打包生成外部配置文件修改后端访问地址
山谷里的杂货铺
07-04 3833
前端打包需要向后台问一个接口访问地址，测试环境、生产环境都需要一个地址，每次打包时都要前端切换地址，感觉很麻烦，现在这个方法是打包后，在配置文件中修改地址。1、在public 文件下新建一个config.js文件，并进行编辑 2、找到你请求接口的地方 3、修改Index.html文件，引入config.js文件 4、dist包 只要修改dist包下的config.js文件的url就可以了...
vue项目打包之后， 生成一个可修改IP地址的文件
油墨香^-^的博客
08-04 183
今天在做项目的时候遇到了一个问题， 就是把项目部署到不同的服务器上， 但不能每次修改IP的时候就打包一次， 这就增加了前端的工作量，经过百度， 发现有一些方法是可以的，亲测可用。这样就完成了，重新打包之后，在static文件夹中会生成config.js的文件， 修改这个文件的地址，就可以更换IP地址了。2， 在vue项目中的index.html页面引用这个config.js。3， 在你封装的请求页面，把这个全局暴露出来的Window属性接口IP写到公共方法里面。
Vue 前端代码多地部署（打包后配置动态IP）
来杯卡布奇诺的博客
05-15 2512
vue 代码打包之后，需要在多个地方部署。打包完之后，在 dist 下有一个 config.json 文件，可以通过该文件来动态配置 ip 地址。打包完之后，在 dist 下有一个 config.js 文件，可以通过该文件来动态配置 ip 地址。在 public 根目录下新建一个 config.json 文件。在 public 根目录下新建一个 config.js 文件。在 index.html 中引入 config.js 文件。下面总结两种方式可以在打包之后动态修改 ip 地址。在需要的地方直接通过。
vue+vite项目打包生成可以后端修改url ip的相关配置与使用方式
qq_43572283的博客
10-19 2761
vue项目npm run build打包后会生成一个dist文件，我们有时候需要一个配置文件来更改所有请求ip地址，如果没有这个配置文件，我们就需要每次在项目代码中更改，然后再打包，这样就很麻烦，所以可以选择用一个配置文件来更改打包后的url，方法步骤如下：（以一个需求为例：判断用户是否登录，如果未登录则提示登录并跳转网址，在开发环境和生产环境分别跳转不同的外部链接）
vue打包之后，可以进行修改配置后端地址、端口等信息方法
用心,承载未来
04-12 5433
用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是，难道我们只是改个接口地址也要重新打包吗？当然不行了，那就太麻烦了，怎么解决呢？本文推荐俩种方式。
vue 修改动态api地址（打包后实现动态修改api服务地址）
Missxu1895的博客
08-17 5148
目前来说，前端和后端是分开的，然后运维那边想要换服务器，如果总换服务器，那api地址也是总换，就要不停的打包部署，现在就是想要实现打一次包就可以在打包的dist文件夹里动态修改api地址，在网上查到有两种方法都可以实现这种直接在dist文件里面进行修改，无需反复打包 第一种： 在public增加config.js文件 window.ipConfigUrl = { baseURL:"http://192.168.0.76:31900" } 在public下的index.html引入config
vue 打包后的IP地址可修改，不用重新打包
qq_42148355的博客
08-29 655
打包完成后，打开dist文件夹更改config.js里面的地址就行了，不用重新打包
Vue动态配置IP及端口，打包后随时改随时生效。
pipizhou16的博客
01-04 4232
一、利用public下的文件不会被打包的原理 在pubic下生成一个json文件，在封装的axios中用原生ajax请求去获取json文件，根据自定义的环境来设置接口地址。 config.json文件 { "url": "http://www.itcbc.com:3006/api/getbooks" } 下面是简单写了个ajax请求，点击事件。 var xhr = new XMLHttpRequest(); xhr.open('GET', "./config.
vue设置全局配置文件，打包后在dist包内可动态修改配置
weixin_43485503的博客
07-14 6289
vue设置全局配置文件，打包后在dist包内可手动修改配置文件
【vue项目问题解决】如何做到webpack打包vue项目后，可以修改配置文件IP和端口
球球博客
10-15 2300
记录在项目开发过程中遇到的小问题，积累开发经验，欢迎大家一起留言探讨 问题 我们在vue项目中打包的时候，webpack会将我们的组件，html，js，css，jpg等其他文件进行打包，其中请求的ip和端口也是在开发过程中写好的，直接打包生成了相应的js，如果此时我们想要修改请求的IP和端口，需要修改打包后的文件，不好查找，并且也容易出错。 期望效果 打包之后，可以通过修改某个配置文件，进行ip和端口的配置 代码实现 1、public文件夹下创建config.js,将apiURL添加到window对象中.
vue2打包后的文件dist如何部署到linux上
07-17
将Vue 2的打包文件部署到Linux服务器上，你可以按照以下步骤进行操作： 1. 通过FTP或其他文件传输工具将`dist`文件夹中的内容上传到Linux服务器上的目标文件夹。确保你拥有足够的权限来访问和操作该目标文件夹。 2. 在Linux服务器上安装一个Web服务器，例如Nginx或Apache。这些服务器软件可以帮助你将静态文件（如HTML、CSS和JavaScript）提供给客户端。 3. 配置你的Web服务器以提供Vue应用程序。以下是两个常见的配置示例： - Nginx配置示例： ``` server { listen 80; server_name yourdomain.com; root /path/to/your/dist/folder; location / { try_files $uri $uri/ /index.html; } } ``` - Apache配置示例： ``` <VirtualHost *:80> ServerName yourdomain.com DocumentRoot /path/to/your/dist/folder <Directory /path/to/your/dist/folder> Options Indexes FollowSymLinks MultiViews AllowOverride All Require all granted </Directory> </VirtualHost> ``` 请确保将`/path/to/your/dist/folder`替换为你实际的`dist`文件夹的路径。 4. 重新启动你的Web服务器，以使配置生效。 现在，你的Vue应用程序应该可以通过在浏览器中访问服务器的IP地址或域名来访问了。例如，如果你的服务器IP地址是`192.168.1.100`，则可以在浏览器中输入`http://192.168.1.100`来查看你的Vue应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值