vue 项目设置局域网IP地址访配置

最新推荐文章于 2024-08-26 14:18:05 发布
最新推荐文章于 2024-08-26 14:18:05 发布
阅读量2k 收藏 4
点赞数
分类专栏： vue前端 文章标签： vue npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lisa_Xiaotouzi/article/details/106057203
版权
本文详述了如何配置Vue项目，使其能在局域网内通过IP地址访问。步骤包括查看并使用ipconfig获取IP，修改config的index.js文件设置host，更新package.json的scripts.dev配置，重启服务器并通知他人使用同一局域网IP访问。注意避免package.json中出现注释，并考虑关闭防火墙以确保可访问。
摘要由CSDN通过智能技术生成

为了方便项目的开发进展，可以设置同一局域网访问本地ip地址

---菜鸟一枚，写得超级详细

1.cmd打开命令指示符：ipconfig/all 查看自己的IP地址

2.修改config文件中找到 index.js 文件的host改成 IP地址：192.168.1.166

3. 修改项目文件夹下的package.json 文件配置，scripts.dev配置在默认的情况下加上 --host 192.168.1.166

完整写法：

注意：package.json比较特殊，不可有注释条目，不然就会报错

4.重启服务器 npm run dev

5.给需要访问的人员发送ip地址：http://192.168.1.166:8080 ，只要是同一局域网，即可访问

注意：如果通过IP还不能访问，最好是关闭开发机的防火墙

Lisa_Xiaotouzi
关注
专栏目录
npm run dev 时无法通过本机地址访问项目
qq_53066920的博客
08-09 1763
很明显这里没有显示可以使用外部地址进行访问项目；而且他们提示需要使用配置host。本项目正对Vue3 存在配置文件。 ➜ Local: http://localhost:5314/ ➜ Network: use --host to expose ➜ press h to show help
vue设置全局服务ip
qq_40319828的博客
03-30 672
1. 添加了public/config.js sunwayConfig={ ip: xxx } 2. 在html中引用 3. 全局挂载
局域网内vue2 3 配置本地IP地址访问项目
m0_68716504的博客
06-24 1074
/在这句代码后面添加 --host 0.0.0.0" 如下messages: [ //下面两个地方，直接复制即可` - Local: http://localhost:${port}`, //配置这里` - Network: http://${require('ip').address()}:${port}`,//配置这里],},?}))
vuejs配置局域网访问
iceking
01-09 1256
方法一： 打开项目package.json文件 按以下进行配置 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --port 8080 --host 0.0.0.0", "start": "npm run dev", "bui...
Vue基础：四、全局配置
姜希成的博客
09-06 225
silent
前后端的独立部署，修改vue支持ip、localhost访问，ip、localhost访问前端页面，只有ip访问方式后端@CookieValue可以获得cookie值
qq_26505167的博客
05-07 1762
1、vue前端修改支持ip、localhost访问 config下的index.js host: '0.0.0.0' 访问后端域名改为 window.SITE_CONFIG['baseUrl'] = 'http://192.168.0.5:8080/platform-admin' 修改后ip、localhost都可以正常访问页面 2、后端使用到@CookieValue 1）、需要前端设置cookie值 Vue.cookie.set('appid', appid) 2）、如果...
vue项目配置同一局域网可使用ip访问的操作
01-18
此处的”0.0.0.0″可以改成自己的ip，重启项目就可以了 补充知识：@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案 今天他们遇到一个很有意思的bug，用@vue/cli创建项目...
webpack vue项目开发环境局域网访问方法
08-27
要使局域网内的其他设备可以访问我们的开发服务器，我们需要确保项目启动的IP地址和端口号是固定的，这样其他设备才能通过特定的网络地址来访问。通常，默认的开发服务器会绑定到`localhost`（127.0.0.1），只允许...
完美解决通过IP地址访问VUE项目的问题
01-21
第一步 1.将config里面的host设置成0.0.0.0 host: ‘0.0.0.0’, 2.修改package.json scripts: { start: cross-env NODE_ENV=development webpack-dev...3.查看开发机的ip地址，并告诉给其他小伙伴，还有端口号 补充
vue 本地服务不能被外部IP访问的完美解决方法
10-17
主要介绍了vue 本地服务不能被外部IP访问的解决方法,本文通过代码讲解的非常详细，需要的朋友可以参考下
vue项目配置局域网可访问（局域网通过ip地址访问本地项目）
starstarstarl的博客
03-01 750
vue项目配置局域网可访问，局域网通过ip地址访问本地项目
vue配置全局请求地址
weixin_43090018的博客
03-31 4276
1、首先安装好axios和qs（，序列化字符串，处理发送请求的参数） 2、安装完成后在main.js中加上下面的代码 axios.defaults.baseURL = "自己的请求地址" axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; Vue.proto...
vue的npm run dev自动打开浏览器姿势（自动获取本地ip）
m0_37036014的博客
03-21 6124
vue 的 npm run dev 自动打开浏览器姿势（自动获取本地的ip地址） 前言 比这开发时，用了vue-cli，运行npm run dev命令行时会自动打开浏览器，并且默认的是打开http:// localhost:端口/，当我想用手机设备去访问时，访问地址得是http:// IP地址:端口的形式，然而我们的ip是每次都会变化的，这样导致每次都需要操作 ipconfig 获取本地ip再...
vue运行 cnpm run dev后可以使用IP访问设置
one_four_two的博客
04-09 4263
在运行完 cnpm run dev 命令后可以通过localhost:8080访问。但是不可以通过IP访问。这时可以在package.json文件夹的scripts的dev选项添加 --host 0.0.0.0 “dev”: “webpack-dev-server --host 0.0.0.0–inline --progress --config build/webpack.dev.conf.j...
vue本地项目可以局域网能访问（IP地址访问）
Yiu的博客
04-30 4947
最近小伙伴们问我为什么VUE为神马不能再同局域网内访问，emmmm....！ 哈哈哈,怎么可能呢！本博主是无所不能的好不啦！ 下面进入主题，总结一下vue本地项目可以用IP地址 在局域网内访问 方法1.将index.js中的host的值改为‘0.0.0.0’ config/index.js,有个host的配置项，默认值为“localhost”,我把localhost改成ip地址，重...
前端代码怎么获取本机ip发给后端_Vue 新手向——后端代码（1）
weixin_39650091的博客
12-04 1572
现在前后端分离是程序越来越多的趋势了，今天在学习vue时，前期在本地跑得好好的，然后和后端一对接就出问题了，但是前端和后端是不可能不和后端对接的。 1. 即便是后台数据库比较花时间，但是用户体验也比前面的方式好，因为用户会先看到部分页面，过一小会儿再看到数据，比在空白页面打圈圈等待体验好。 2. 后端只提供数据，所以前后端开发耦合度降低了很多，整体开发效率可以得到较大提高。@RequestMap...
vite (vue3)配置内网 ip 访问 方法
热门推荐
qq_39111074的博客
04-01 1万+
vite 配置内网 ip 访问 方法
解决npm run dev无法被同局域网访问的问题
道长的博客
08-26 880
解决生成的网址无法被同局域网下的其他主机访问的问题，关键在于配置开发服务器以监听所有网络接口，或者使用内网穿透工具。根据你的具体需求和环境，选择合适的解决方案，可以大大提高开发和测试的便利性。
安卓webview加载vue项目的局域网地址
最新发布
09-10
在安卓开发中，WebView组件可以用来加载网页，包括Vue项目构建的网页。当你有一个Vue项目，并希望在安卓设备的WebView中加载局域网地址时，你需要确保Vue项目已经被正确构建，并且可以通过局域网访问。 步骤如下： 1. 首先，确保Vue项目已经使用npm run build或yarn build进行构建，这会将项目构建到dist目录下。 2. 在你的电脑上启动一个Web服务器，以提供Vue项目构建出的文件。如果你使用Node.js，可以使用http-server、serve等简单的静态文件服务器。例如，使用http-server，你可以在项目根目录下运行命令：`http-server -p 8080`，这将在8080端口启动一个服务器，你可通过浏览器访问 `http://localhost:8080` 来查看你的Vue应用。 3. 确定你的电脑在局域网中的IP地址。在Windows上可以通过命令提示符输入 `ipconfig`，在Mac上可以通过终端输入 `ifconfig` 来查找。 4. 将步骤2中启动的服务器的地址替换为你的局域网IP地址。如果使用的是http-server，可以使用 `-a` 参数绑定局域网IP，例如：`http-server -a 192.168.1.100 -p 8080`。这样你就可以通过局域网中的其他设备访问 `http://192.168.1.100:8080` 来查看你的Vue项目。 5. 在你的安卓应用中，创建一个WebView组件，并使用 `WebView.loadUrl()` 方法来加载上面得到的局域网地址。 示例代码如下： ```java WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.loadUrl("http://192.168.1.100:8080"); ``` 请确保你的安卓设备和电脑处于同一局域网内，并且没有防火墙或路由器设置阻止访问这个IP和端口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值