vue项目不能同时被localhost和ip地址同时访问的方法

最新推荐文章于 2024-06-24 11:03:14 发布
转载 最新推荐文章于 2024-06-24 11:03:14 发布 · 1.2k 阅读 · 0

初始化基于vue-cli和webpack的Vue项目后，可通过npm run dev启动，浏览器输入localhost:8080访问。但手机用ip地址访问遇问题，修改配置文件中host为ip可解决，但localhost无法访问。最终找到两种解决办法，一是将index.js中host改为‘0.0.0.0’，二是在package.json的script下dev后加--host 0.0.0.0。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在初始化完一个vue项目(基于vue-cli 和webpack)之后，我们可以通过 npm run dev来让这个项目跑起来。

我们在浏览器里输入localhost:8080就可以访问该项目了。

但是要是手机想访问的话，就得通过ip地址，但当我输入ip地址进行访问时，却发现不行。

于是我找项目的配置文件，发现config/index.js,有个host的配置项，默认值为“localhost”,我把localhost改成ip地址，重启，发现可以访问，但localhost：8080这个地址就没办法访问了。

本着一点强迫症，在网上百度的基础与向dalao请教的基础之上，找到了有个解决办法。既能通过ip地址访问，也能通过localhost访问。

方法1.将index.js中的host的值改为‘0.0.0.0’

方法2.修改package.json中script下dev的值，在后面加入--host 0.0.0.0 也可以解决

Vue 教程(三十七)搭建本地服务器
yuan_xw的专栏
08-10 1513
Vue 教程(三十七)搭建本地服务器 搭建本地服务器 webpack 提供了一个可选的本地开发服务器,这个本地服务器基于 node.js 搭建,内部使用 express 框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。 不过它是一个单独的模块,在 webpack 中使用之前需要先安装它。 安装模块 npm install --save-dev webpack-dev-server@2.9.3 修改 webpack.config.js 文件 // 导入Node中path常量
vue33 —— 搭建本地服务器
weixin_43899694的博客
11-24 505
webpack提供一个可选的本地开发服务器 该本地服务器基于nodejs搭建，内部使用express框架 可实现让浏览器自动刷新显示修改后的结果。不用每次都npm run build 把文件先放到内存中，浏览器从内存中直接读取。最后发布才把文件放到硬盘 安装配置： npm install webpack-dev-server@2.9.1 --save-dev module.exports ...
Vue项目配置IP访问地址
m0_52244931的博客
03-06 2676
原来host:'localhost’更改为 host:‘0.0.0.0’将compilationSuccessInfo中的message更改。1、config/index.js文件。
关于node执行npm install安装报错的解决办法
道的博客
06-13 4260
1.遇到的问题:npm install安装报错 2.解决方案：一开始是认为webpack没有安装好，并对webpack进行了安装，之后发现还是 install 报错 --安装webpack npm install webpack-dev-server --save-dev --清除npm缓存 npm cache clean --force 3.效果： ...
vue+element-项目build打包以后入口文件显示空白的解决方案
红岸基地
06-14 4115
现象描述 我在准备测试一个项目的时候，需要打包给后端使用， 我打完包以后发现，入口文件，也就是这个文件 该文件是直接打不开的，那么我之前是遇到过的，此类的问题，开始是认为是router.js里面的mode改变了导致的，也就是我们在配置路由的时候是可以直接将mode：history的，在路由文件里面，但是我改变以后发现还是不行的，后来百度了以后发现是因为其中有一个文件是不对的，需要我们在配置文件里...
vue连接本地服务器
大道至简
12-29 1373
vue,js连接本地服务器
vue 本地服务不能被外部IP访问的完美解决方法
10-17
总的来说，通过修改`webpack-dev-server`的配置，我们可以轻松解决Vue本地服务不能被外部IP访问的问题。这种方法适用于开发者需要跨设备测试或协作的情况，但同时也需要注意安全问题。希望这篇文章对你有所帮助，...
完美解决通过IP地址访问VUE项目的问题
10-15
4. 通过IP地址和端口号在其他设备上访问Vue项目。 5. 确保所有设备在同一Wi-Fi网络下，以实现真机调试。 通过以上步骤，你便可以轻松地让其他人或设备访问你的Vue项目，进行远程测试和协作。这不仅适用于Vue项目，...
vue在手机中通过本机IP地址访问webApp的方法
10-18
在移动设备上通过本机IP地址访问Vue开发的Web应用程序是一种便捷的测试方法，可以使得开发者在不需要将应用部署到服务器上时，也能在真实的设备上预览应用。为了实现这一功能，需要做一系列配置和操作。以下详细说明...
vue init webpack myproject构建项目 ip不能访问的解决方法
08-27
4. 使用本地 IP 地址访问项目，问题应已解决。 希望这个解答对你理解 Vue.js、Webpack 配置以及解决本地访问问题有所帮助。如果你在实际操作中遇到任何困难或者有其他相关问题，欢迎继续探讨。
vue-cli项目无法用本机IP访问的解决方法
10-17
在某些版本的Vue CLI中，`host`被设置为`localhost`，这意味着服务器只监听本地回环地址（127.0.0.1），而不监听本机的其他网络接口，因此外部设备无法访问。 为了解决这个问题，我们需要修改`config/dev.env.js`或...
vue-cli使用ip访问本地服务
litCabbage的博客
01-10 1481
vue-cli启动的node服务，试用localhost或者127.0.0.1可以正常访问，但是如果想用本机ip访问的话，需要修改一个设置，host host: '0.0.0.0', //应设置为0.0.0.0，而不是localhost
Vue-自带vue-resource插件实现http请求
weixin_33832340的博客
11-23 211
安装 本地环境安装路由插件vue-resource： cnpm install vue-resource--save-dev *没有安装淘宝镜像的可以将cnpm替换成npm 想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.html，（打开搜索 镜像即可跳转到对应位...
webpack搭建本地服务器
hhtSeeTheWorld的博客
04-22 184
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。 不过它是一个单独的模块，在webpack中使用之前需要先安装它 npm install --save-dev webpack-dev-server@2.9.1 devserver也是作为webpack中的一个选项，选项本身可以设置如下属性： contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
局域网内vue2 3 配置本地IP地址访问项目
m0_68716504的博客
06-24 2276
/在这句代码后面添加 --host 0.0.0.0" 如下messages: [ //下面两个地方，直接复制即可` - Local: http://localhost:${port}`, //配置这里` - Network: http://${require('ip').address()}:${port}`,//配置这里],},?}))
配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示localhost和network访问地址
热门推荐
qq_41497443的博客
09-14 3万+
配置vue项目实现localhost本地访问和ip访问且设置启动后终端显示localhost和network访问地址 1、首先设置localhost和本地ip访问 在config文件下的index.js文件中，修改host为： host: '0.0.0.0'， 或者在package.json文件下"scripts"的"dev"值后新增–host 0.0.0.0"，即： "dev": "webpack-dev-server --inline --progress --config build/webpack
通过IP地址访问前端Vue项目
2301_78767322的博客
01-16 1668
通过IP地址访问前端Vue项目
VUE搭建项目，配置本地IP地址其他人可访问项目
qq_43528934的博客
03-16 2602
同样还是在build文件夹下面的webpack.dev.conf.js文件找到。3.配置一下build文件夹下面的webpack.dev.conf.js文件。4.最后配置一下启动项目 通过localhost 和本地ip地址访问。1.首先找到config文件夹目录下的 index.js文件。2.然后找到package.json配置文件。
Vue项目打包以及本地服务器创建并部署项目
Alin_Wu_的博客
04-15 1039
此时直接访问 localhost:5005 就可以看见用vue写的页面了（默认访问的是index.html）如果不显示页面，ctrl+c停止服务器并重新启动就可以了。在与server.js同级下创建一个static文件夹(一般是用static命名)，将打包好的dist下的文件复制到static文件夹下，修改server.js代码如下。路由的工作模式是hash，各种乱点再刷新是没问题的。1.用正则匹配判断哪些是前端路由，哪些是后端路由（没了解，不太懂）2.用npm的一个中间件。
前端vue项目启动时Network不显示ip显示localhost
最新发布
04-03
### Vue项目中网络请求显示`localhost`而非IP地址的解决方案 在开发环境中，Vue项目的默认配置通常会将API请求指向`localhost`。然而，在某些情况下（例如跨设备调试或部署到服务器），可能需要更改此行为以使请求指向特定的IP地址。 #### 修改Vue CLI中的代理设置 如果使用的是Vue CLI工具链，则可以在`vue.config.js`文件中定义代理规则来修改请求的目标地址。通过这种方式可以指定实际的IP地址而不是`localhost`作为目标主机[^1]： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://<your-ip-address>:port', // 替换为实际的IP地址和端口 changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 上述代码片段展示了如何重新定向所有的`/api`路径下的请求至指定的IP地址和服务端口号上。 #### 使用环境变量自定义基础URL 另一种方法是利用`.env`文件来自定义不同环境下使用的API基础URL。这允许开发者轻松切换生产与开发模式下所访问的服务地址[^2]: - 创建或者编辑位于项目根目录下的`.env.development`文件并加入如下内容: ```bash VUE_APP_BASE_API=http://<your-ip-address>:port/api/ ``` 接着，在前端发起HTTP请求时可以通过读取这个环境变量构建完整的请求链接: ```javascript const axiosInstance = axios.create({ baseURL: process.env.VUE_APP_BASE_API || '/api', }); ``` 这样做的好处在于无需每次调整源码即可适应不同的运行场景需求。 #### 调整Nginx反向代理配置支持外部访问 当应用已经部署完毕但仍希望保留原有的基于路径区分前后端逻辑的功能时，可考虑优化现有的Nginx配置使其能够接受来自公网或者其他局域网内的连接尝试。确保防火墙开放相应端口，并更新站点配置文件如下面例子所示： ```nginx server { listen 80; server_name your-domain-or-ip; location / { root html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } location /api/ { rewrite ^/api/(.*)$ /$1 break; proxy_pass http://backend_server_ip_or_hostname/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } ``` 以上配置示例说明了怎样让Nginx识别带有`/api`前缀的请求并将它们转发给后台服务处理程序。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值