通过IP地址访问前端Vue项目

已于 2024-01-16 14:46:30 修改
阅读量1k 收藏 12
点赞数 9
文章标签： 前端 vue.js javascript
于 2024-01-16 14:42:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78767322/article/details/135624505
版权

应用场景

其他人查看前端工程师在本地跑的vue项目

步骤

1. cmd输入ipconfig命令，找到自己的ip地址，例如192.168.0.1

2. 修改vue项目下vue.config.js文件中host值为ip地址

3. 关闭电脑防火墙

4. 重启项目 浏览器输入ip地址加端口号打开

一颗努力的小土豆
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
完美解决通过IP地址访问VUE项目的问题
10-15
主要介绍了完美解决通过IP地址访问VUE项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈vue项目,访问路径#号的问题
10-14
此外，如果你的Vue项目在本地开发时需要同时通过localhost和IP地址访问，你可以在`index.js`配置文件中修改`host`属性，将其设置为你本机的IP地址： ```javascript host: '192.168.X.XX', // replace X's with your...
Vue2版本如何使用ip访问?
weixin_52261391的博客
06-24 2241
vue2版本使用ip地址访问
【阿里云新手使用】Vue前端项目上传至阿里云服务器，并通过公网IP访问前端网站
最新发布
weixin_47540834的博客
04-24 2119
vue脚手架只是开发过程中协助开发的工具，真正上线时，需要将vue项目转换成静态资源文件命令;运行成功界面：运行成功后会在项目根目录下生成dist文件夹，如下图：dist文件夹下的index.html文件就是打包出的页面文件，上线时将dist文件夹放置到云服务器即可但此时，去直接打开index.html是无法打开的，这需要下一步，配置相对路径。
Vue项目配置IP访问地址
m0_52244931的博客
03-06 1425
原来host:'localhost’更改为 host:‘0.0.0.0’将compilationSuccessInfo中的message更改。1、config/index.js文件。
VUE搭建项目，配置本地IP地址其他人可访问项目（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-06 2382
VUE搭建项目，配置本地IP地址其他人可访问项目
vue项目使用ip访问出现空白页
qq_38900685的博客
10-23 283
使用ip访问首页出现空白页。
vite (vue3)配置内网 ip 访问 方法
热门推荐
qq_39111074的博客
04-01 1万+
vite 配置内网 ip 访问 方法
其他人如何查看前端工程师在本地跑的vue项目（0.0.0.0）
01-20
本文将详细介绍如何让其他人能够访问前端工程师本地运行的Vue项目。 首先，Vue项目通常通过webpack-dev-server或类似的开发服务器运行，它们默认将项目绑定到`localhost`，这意味着只有在本地计算机上才能访问。...
webpack vue项目开发环境局域网访问方法
08-27
要使局域网内的其他设备可以访问我们的开发服务器，我们需要确保项目启动的IP地址和端口号是固定的，这样其他设备才能通过特定的网络地址来访问。通常，默认的开发服务器会绑定到`localhost`（127.0.0.1），只允许...
vue项目在线上服务器访问失败原因分析
11-20
珊妹儿遇到一个奇葩问题哈，跟大家伙来分享分享，首先因为刚接手的项目，我还没有线上服务器的连接信息，前端代码都是我打包好给别人，...补充知识：vue项目在使用ip地址加端口号不能访问时 修改package.json文件的scri
Vue3使用IP地址访问（解决 ERR_CONNECTION_REFUSED）
宋冠巡的博客
03-04 9967
Vue3使用IP地址访问（解决 ERR_CONNECTION_REFUSED）
内网访问前端本地项目方法
weixin_62144981的博客
10-11 278
3. build中webpack.dev.conf.js里devserver中增加disableHostCheck:true。2.config中index.js里dev模块host改为自己ip地址。1.package文件里更改host为0.0.0.0。"host":"自己ip地址"
通过 IP 访问 Vue 项目
格物致知，知行合一。
08-21 1344
要在手机上测试 vue 项目，发现无法通过 IP 地址访问 PC 上运行的 Vue 项目。 手机要和 PC 在同一个 WiFi 下。 解决方案 方式一 修改「project_name/build/webpack.dev.conf.js」中的 const HOST = process.env.HOST 为 const HOST = '192.168.x.xx' // const HOST = p...
vue项目局域网多设备调试、ip方式访问中的一些细节
qq_46160082的博客
04-23 719
vue项目局域网多设备调试
Vue - 同时使用 ip、localhost访问项目
iotjin的专栏
03-10 1507
Vue - 同时使用 ip、localhost访问项目
实现vue项目可通过 IP 和 localhost
Summer_JK的博客
02-01 1338
实现vue项目可通过 IP 和 localhost 同时访问项目
访问前端本地环境
zcy_csdn123的博客
06-27 1629
前端在开发的之后会经常链接服务端人员的本机环境， 下面说一下如何连接前端本机的项目， 说一下前提，基本上是基于node的环境，我已VUE项目为例 关键其他的我也不知道 哈哈 1、首先注意的是 必须在同一网络下面，就是访问的人和你 用的是同一个网络， 2、在有一点就是 在webpack的配置中 有host这一项，一般都是localhost,但合理我们将这个配置调整为 3、 访问本机真实IP 不知道的...
Vue.js - 如何解决Vue项目IP地址无法访问的问题？
牧码的博客
08-06 3723
Vue脚手架vue-cli起的webpack项目，用localhost可以正常访问，切换到ip就提示无法访问此网站，下面是详细的介绍。 在编写项目时，有的时候localhost的链接是可以正常访问的，但是我们需要在其他设备上也访问到改地址，所以就需要ip地址进行访问了，但是ip访问提示我们无法访问此网站。 查看 config 文件夹下的 index.js 修改index.......
nginx部署前端vue项目
08-25
要将Vue项目部署到Nginx，需要按照以下步骤进行操作： 1. 首先，确保你已经在本地构建了Vue项目并生成了静态文件。你可以使用命令 `npm run build` 来完成这个步骤。这会在你的项目目录下生成一个 `dist` 文件夹，里面包含了所有的静态文件。 2. 安装并配置Nginx服务器。确保你已经在服务器上安装了Nginx，并且可以访问到Nginx的配置文件。通常情况下，Nginx的配置文件位于 `/etc/nginx/nginx.conf` 或者 `/etc/nginx/conf.d/default.conf`。 3. 打开Nginx的配置文件，找到 `server` 部分（通常是通过 `server_name` 指令来定义的）。在该部分下添加以下配置： ``` server { listen 80; server_name your_domain.com; # 替换为你的域名或IP地址 location / { root /path/to/your/project/dist; # 替换为你的Vue项目的dist目录的路径 index index.html; try_files $uri $uri/ /index.html; } } ``` 确保将 `your_domain.com` 替换为你的域名或IP地址，并将 `/path/to/your/project/dist` 替换为你的Vue项目的dist目录的路径。 4. 保存并关闭Nginx的配置文件，并重新加载Nginx的配置。你可以运行以下命令来重新加载配置： ``` sudo service nginx reload ``` 现在，你的Vue项目应该已经成功部署到Nginx上了。你可以通过访问你的域名或IP地址来查看部署的结果。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值