vue 项目中设置localhost 和本机 ip 都可访问项目

最新推荐文章于 2024-03-20 16:23:53 发布
最新推荐文章于 2024-03-20 16:23:53 发布
阅读量804 收藏
点赞数 1
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42486547/article/details/124632346
版权

vue 项目中设置localhost 和本机 ip 都可访问项目

启动项目之后 使用 localhost 可以正常访问项目 当时当切换为本机 ip 访问的时候，访问不到页面
试了好多次终于找到一下两种方法 希望有所帮助

方法一：

在config文件夹下面的 index.js 里面 host 将 local host 修改为 0.0.0.0

在这里插入图片描述

方法二：

在package.json 文件内

请添加图片描述

然后 重新 npm run dev 运行项目 问题解决

踩在浪花上。
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
完美解决通过IP地址访问VUE项目的问题
10-15
在Vue项目中，配置文件通常是`config/index.js`。在这里，我们将`host`设置为`0.0.0.0`，这使得服务器监听所有网络接口，而不是仅仅监听本地回环地址。打开`config/index.js`文件，找到`host`字段并将其改为： ```...
vue在手机中通过本机IP地址访问webApp的方法
12-09
如果想通过手机输入本机IP访问需要在package.json中配置 package.json配置 最后在手机通过IP就可以访问到webApp，或借助草料二维码生成修改后项目地址的二维码,掏出手机扫一扫即可~ 通过机IP访问效果 Tips:需要...
VUE 配置localhost和ip都可以访问项目
林中明月间丶
04-12 671
https://blog.csdn.net/qq_43553067/article/details/88375750
Vue项目启动后用局域网不能访问
分享自己的经验、IT技术，愿在博客中遇见更好的自己
12-08 1896
今天来解决一个问题：基于Vite构建的Vue项目在启动后只能通过localhost这种形式访问，但 如果把localhost换成本主机的局域网ip地址之后页面无法访问了。
vue项目设置通过IP和localhost可同时访问
最新发布
Aa12364567的博客
03-20 565
vue项目设置通过IP和localhost可同时访问。在要运行的分支下添加host,最后重新运行项目。打开package.json文件。
vue运行项目只有local地址，没有network地址
vayne_1的博客
10-12 909
vue运行项目只有local地址，没有network地址，手动添加
django接口可以通过localhost或者127.0.0.1进行访问,但无法通过本机ip地址访问
qq_43515713的博客
09-14 1059
1.修改django项目中的settings.py文件。2.通过运行如下命令启动，可以通过本机ip地址访问。
Vue项目配置本地访问地址和IP访问地址
m0_46570767的博客
06-21 2970
Vue项目配置本地访问地址和IP访问地址 1.在config/index.js配置： dev: { host: '0.0.0.0', } 2.在build/webpack.dev.config.js更改compilationSuccessInfo的message，如下： compilationSuccessInfo: { // messages: [`Your application is running here: http://${devWebpackConfig.devSe
vue-cli项目无法用本机IP访问的解决方法
10-17
总的来说，解决Vue CLI项目无法通过本机IP访问的问题，主要是调整开发配置，使服务器监听所有网络接口。这一改动对于多设备预览和跨平台测试非常有用，同时也提醒我们在开发过程中要注意网络安全。
解决vue中使用proxy配置不同端口和ip接口问题
10-16
主要介绍了解决vue中使用proxy配置不同端口和ip接口问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
不用的子网内有相同的ip_IP设置方法的步骤分解
weixin_39584529的博客
11-16 717
需要设置本地IP一般是在内网中，如常见的路由器与交换机等网络环境中就经常需要设置本地连接ip。下面就一起来学习下本地连接ip设置详细步骤吧。下面以windows xp系统为例，windows 7设置方法与此相同，唯一不同的是在windows xp网络属性中我们选择TCP/IP协议，而windows 7系统中选择IPV4协议，其实都是一样的，只是两系统写法不一样。步骤一：进入桌面-进入网上邻居-查看...
vue 项目获取本地IP+用户名称
qq_46344419的博客
06-14 1512
vue 项目获取本地IP+用户名称
Vue项目多地IP地址部署，后台配置动态IP
weixin_39066827的博客
08-07 4024
前端代码部署到用户本地，打包部署之后，后台以部署地的服务器ip为ip。我是直接通过在index.html文件（此文件项目打包不会的时候不会被打包）中设置一个全局的window对象的IPconfig属性来实现的（用户只需设置一下IP地址为部署地服务器IP）。当然，网上有单独新建一个config文件的方式。 index.html: window.IPConfig = { 'ba...
vue设置全局访问接口API地址
scarlett1017的博客
09-25 3311
1. 设置全局访问接口API地址的好处 在前后端分离的项目里，与后端交互过程中，需要通过接口来访问后端中的数据。一般的接口前部分的ip地址都是一致的，如果没有进行url的全局设置，那么当后端的接口地址改变或者是部署之后的网络地址改变，那么就需要一个一个接口去修改，所以最好是进行设置全局访问接口的API地址。 2.如何设置全局访问接口API地址 1）在src目录下建立一个新文件夹，在这个文件夹里面在新建 index,js 2）在index.js中进行一下的代码 3）在main.js中进行以下的.
解决Vue3.0 动态配置IP及端口，打包后随时改随时生效
不忘初心,继续前进
03-29 7031
文章目录前言一、建立public目录及配置文件二、封装axios请求及引入1.封装axios请求 api->index.js2.main.js引入上一步封装的index.js3.调用接口代码不变 前言 假如你的Vue项目需要在多个服务器部署，若使用代理的模式，每个环境都需要先改IP地址及端口，再打包，非常的麻烦，所以本文没有用代理，而是通过Ajax同步获取配置文件信息，封装一个axios请求 一、建立public目录及配置文件 在主目录（即和src同目录）创建public文件夹，创建config.
vite搭建vue3项目本地环境自定义域名及端口配置
一个前端小菜菜的博客，四五年的经验，熟悉vue，react，nuxt，微信小程序，Uniapp。
02-17 4265
此时我们可以打开我们的vite创建的项目了，打开vite.config.js，直接输入如下配置即可，运行项目即可达到自定义域名的一个目的了。
vue 服务只能使用localhost，不可用本地IP访问解决
sweet__queen的博客
09-03 3555
方法1.(1)修改index文件的host值，将localhost换成0.0.0.0,此时访问是0.0.0.0：80xx (2) 可在build/webpack.dev.conf.js中找到 devServer：--添加 useLocalIp:true, 方法2.package.json中 scripts： dev：最后添加 --host 0.0.0.0 原因： webpack-dev-server 配置 host 时，默认是localhost。如果想被外部访问，需要 ...
vue项目CROS跨域错误？将API接口的具体IP修改为localhost即可轻松解决
yebanliyu的博客
04-05 3583
本地运行vue项目。关于API接口的两个文件如下。 export function getBaseUrlTest() { // return 'http://192.168.1.112:61078/' return 'http://localhost:61078/' } import { getBaseUrlTest } from '@/config' let base = getBaseUrl(); export const requestLogin = params => {
VUE 如何配置localhost和IP 都可以访问
kkk_xxx的博客
06-10 4795
可能很多小伙伴都会遇到 老大说要访问你本地的PC/H5链接 PC/H5启的服务链接发给我的问题 希望这篇文档到时候可以帮到你~ 设置成：host: ‘localhost’ 本地IP无法访问 会报下图这个错误 不要慌 正确的配置 是在config/index.js文件中 将 host: ‘localhost’ 改成 host: '0.0.0.0’ 设置 useLocalIp: true, //这个一定要加上 重启ctrl+c结束服务 再重启服务就可以啦 大家可以参考一下 ...
vue3+typescript，设置整个项目的默认访问ip及端口号
06-08
在 Vue3 + TypeScript 项目中，你可以使用 axios 和 vue-axios 库来设置整个项目的默认访问IP和端口号。具体步骤如下： 1. 安装 axios 和 vue-axios 库。 ``` npm install axios vue-axios --save ``` 2. 在 main.ts 中导入 axios 和 vue-axios 库，并设置默认的请求地址和端口号。 ```typescript import { createApp } from 'vue' import App from './App.vue' import axios from 'axios' import VueAxios from 'vue-axios' const app = createApp(App) axios.defaults.baseURL = 'http://localhost:3000' // 设置默认请求地址和端口号 app.use(VueAxios, axios) app.mount('#app') ``` 3. 在需要访问后端的组件中，通过 this.axios 访问后端接口。 ```typescript import { defineComponent } from 'vue' export default defineComponent({ methods: { async fetchData() { const response = await this.axios.get('/api/data') console.log(response.data) } } }) ``` 这样，当你需要修改后端IP和端口时，只需要在 main.ts 文件中修改 axios.defaults.baseURL 即可，整个项目都会生效。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值