VUE 如何配置localhost和IP 都可以访问

最新推荐文章于 2024-09-05 17:12:12 发布

元気欣

最新推荐文章于 2024-09-05 17:12:12 发布

阅读量4.9k

点赞数 3

文章标签： vue linux typescript html5 javascript

本文链接：https://blog.csdn.net/kkk_xxx/article/details/106659635

版权

本文档详细介绍了如何解决本地服务无法被外部访问的问题，通过修改配置文件中的host参数，将其从'localhost'更改为'0.0.0.0'或具体IP地址，并启用useLocalIp选项，从而实现外部设备对本地服务的正常访问。

摘要由CSDN通过智能技术生成

可能很多小伙伴都会遇到老大说要访问你本地的PC/H5链接 PC/H5启的服务链接发给我的问题
希望这篇文档到时候可以帮到你~

设置成：host: ‘localhost’ 本地IP无法访问

会报下图这个错误
在这里插入图片描述
不要慌正确的配置是在config/index.js文件中

将 host: ‘localhost’ 改成 host: ‘0.0.0.0’ 或者自己的IP host:'192…'
设置 useLocalIp: true, //这个一定要加上
重启ctrl+c结束服务再重启服务就可以啦

大家可以参考一下

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

元気欣

关注关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示localhost和network访问地址

weixin_43913004的博客

06-30

242

【代码】配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示localhost和network访问地址。

解决vue中使用proxy配置不同端口和ip接口问题

10-16

主要介绍了解决vue中使用proxy配置不同端口和ip接口问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

参与评论您还未登录，请先登录后发表或查看评论

vue多环境配置及封装axios请求

最新发布

amy1019的博客

09-05

642

项目开发有三个不同的阶段，分别是开发阶段，测试阶段，生产阶段，三个阶段对应不同的项目开发环境，也对应要访问不同的接口地址，再根据不同的接口地址访问到对应的数据。3.在axios.js中配置axios请求，并导出axios配置（axios配置是对请求接口数据进行拦截或处理，请求成功就可以获取到数据）5.在router.js中使用导航守卫对路由进行拦截（导航守卫是对每次页面跳转前进行拦截处理，判断是否可以跳转成功）1.在根目录新建两个文件：.env.prod 与 .env.alpha。

localhost:Localhost的设置和配置

03-28

我个人的Debian环境的初始设置该存储库包含localhost.yml Ansible剧本，用于使用我使用的所有工具和配置来设置新安装的Debian OS。包括什么？常见的debian软件包安装：基本软件包： sudo，rsync，curl，git，apt-transport-https，bash-completion，python-pip，htop 软件包： byobu（文本窗口管理器和终端多路复用器），emacs（文本编辑器），peek（动画截图为GIF），firefox 61（互联网浏览器），weechat（IRC客户端和），kubectl（Kubernetes命令行工具））其他软件包： sqlite3，ibus，im-config，pulseaudio，pulseaudio-module-bluetooth，pavucontrol，bluez，bluez-fi

vue项目启动时将localhost替换成指定ip地址

weixin_30299709的博客

05-04

1639

1.node启动vue项目时地址一般都是http://localhost:8080 2.config->index.js 中的host：‘localhost’换成host：‘你的本机ip’就可以了 module.exports = { dev: { host: '192.168.1.100' } } 转载于:https://www.c...

配置localhost

weixin_44663523的博客

07-14

2877

实现vue项目可通过 IP 和 localhost 同时访问

小R.的博客

04-26

3736

今天遇到了一个问题，好在解决啦。问题是这样的，我本地的IP地址，在我的vue项目里却无法访问。如下图所示。傻傻怀疑是防火墙的问题。。。解决方法： 1、在项目 config文件夹下的index.js文件中，修改host为0.0.0.0 2、修改package.json文件中的dev，在后面加上--host 0.0.0.0，记得中间空个格这样可以实现本地IP地址访问，但是启动服务器时，自动打开的网页是0.0.0.0开头的，如果想以IP地址开头，需要进行下一步操作。 3、在build文

启动vue项目既能localhost访问又能通过ip访问

qq_31721317的博客

07-30

2843

启动vue项目既能localhost访问又能通过ip访问在初始化完一个vue项目(基于vue-cli 和webpack)之后，我们可以通过 npm run dev来让这个项目跑起来，然后就可以在浏览器里输入localhost:8080就可以访问该项目了。如果想通过 ip地址进行访问时，就需要配置本地服务器设置文件。 1：找到config文件夹下的index.js文件，将host的值改为 0...

vue 本地服务不能被外部IP访问的完美解决方法

10-17

总的来说，通过修改`webpack-dev-server`的配置，我们可以轻松解决Vue本地服务不能被外部IP访问的问题。这种方法适用于开发者需要跨设备测试或协作的情况，但同时也需要注意安全问题。希望这篇文章对你有所帮助，...

vue在手机中通过本机IP地址访问webApp的方法

10-18

为了支持通过本机IP访问，我们需要在`vue-cli-service`的`serve`命令中添加`--host *.*.*.*`参数，这将使得服务器监听所有网络接口： ```json "scripts": { "serve": "vue-cli-service serve --host *.*.*.*" } ``...

vue-cli项目无法用本机IP访问的解决方法

10-17

总的来说，解决Vue CLI项目无法通过本机IP访问的问题，主要是调整开发配置，使服务器监听所有网络接口。这一改动对于多设备预览和跨平台测试非常有用，同时也提醒我们在开发过程中要注意网络安全。

完美解决通过IP地址访问VUE项目的问题

10-15

4. 通过IP地址和端口号在其他设备上访问Vue项目。 5. 确保所有设备在同一Wi-Fi网络下，以实现真机调试。通过以上步骤，你便可以轻松地让其他人或设备访问你的Vue项目，进行远程测试和协作。这不仅适用于Vue项目，...

Windows系统如何在本地(localhost)配置Nginx支持多个网站？

CSDN_CASSON的博客

08-30

1810

Windows系统如何在本地(localhost)配置Nginx支持多个网站？

修改Vue项目运行的IP和端口

见证自己学习,成长的记录

02-09

7226

我们在使用VsCode启动Vue项目的时候，我发现：默认的端口号好像和tomcat一样，默认都是8080，如果8080被占用了，就会使用8081,8082这样的方式以此类推。那么，我们是否可以像后端一样，通过修改port属性的方式达到修改运行端口的方式呢？其实还是很简单的。这个vue.config.js和springboot的application配置文件是一个道理，需要修改项目什么东西就直接在里面改。注意语法就好啦！以后遇到其他的配置语法，会持续更新！

前后端的独立部署，修改vue支持ip、localhost访问，ip、localhost访问前端页面，只有ip访问方式后端@CookieValue可以获得cookie值

qq_26505167的博客

05-07

1787

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-cli起的webpack项目用localhost可以访问，但是切换到ip就不可以访问

weixin_30451709的博客

12-02

642

我用的是vux起的一个项目（移动端，基于vue的），因为是移动端的，需要在手机上测试，发现用http://localhost:8081/访问的挺好的，但是换到ip就访问不了，期初我以为是代理的原因，将电脑的代理给关掉了。还是不行，然后改为127.0.0.1访问，发现可以访问，用0.0.0.0访问也可以，就是ip不行。然后就各种google，百度。别人家的方法---都试了好多，发现没效（...

vue项目将localhost改成自己的ip访问

u012201879的博客

12-04

3658

找到项目中config文件夹内的index.js，将dev内部的host修改为本地自己的IP地址,然后重启npm run dev dev: { host: '10.100.36.79' }

vue 和ip 配置本地_vue项目配置localhost和IP地址访问

weixin_39950812的博客

12-22

2309

想要实现下图效果修改\config\index文件的host为’0.0.0.0’ 'use strict'const path = require('path')module.exports = {dev: {assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {},// host: require('ip').add...

解决Vue项目IP地址无法访问（localhost可以访问）的问题？

gaoyaqinglove的博客

08-06

4929

修改项目config目录下index.js文件的host为：0.0.0.0，然后重启服务，即可通过ip访问该项目

vue cli4 解决跨域问题后用localhost可以访问使用ip地址无法被解析导致请求路径出

11-03

在Vue CLI 4中解决跨域问题后，可以通过localhost访问接口，但使用IP地址无法被解析，导致请求路径出错的问题，可能是由于以下原因导致的： 1. 浏览器的同源策略：同源策略要求请求的协议、域名、端口均相同。使用localhost访问时，请求的协议、域名和端口均为相同的localhost，符合同源策略，因此能够正常访问接口；而使用IP地址访问时，与localhost的域名不同，不符合同源策略，浏览器会拦截请求。 2. API配置问题：可能在Vue项目中配置了跨域请求时，只允许localhost的请求通过，而将IP地址没有添加到允许列表中，导致请求路径出错。解决此问题的方法如下： 1. 配置vue.config.js：在Vue项目的根目录下找到vue.config.js文件，如果没有则手动创建。在该文件中，添加devServer选项，设置proxy代理，将需要访问的API接口的域名和端口添加到proxy的target中，示例代码如下： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', // 需要访问的API接口的域名和端口 ws: true, changeOrigin: true } } } }; ``` 2. 使用IP地址访问：在Vue项目中，使用IP地址访问API接口时，将请求路径改为相对路径，如`/api/getData`，而不是绝对路径`http://localhost:8080/api/getData`。这样配置后，不论使用localhost还是IP地址访问，请求都会通过proxy转发到正确的接口地址。通过以上操作，可以解决在Vue CLI 4中使用IP地址访问接口无法解析导致请求路径出错的问题。