本地vue项目的本地调试，同一个局域网下如何让其他人也可以访问我的本地项目

Zzexi

已于 2024-02-19 14:51:49 修改

阅读量5.9k

点赞数 5

分类专栏：笔记 vue 文章标签： vue.js 前端

于 2020-08-18 15:37:57 首次发布

本文链接：https://blog.csdn.net/zzexi/article/details/108078343

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

笔记

2 篇文章 0 订阅

订阅专栏

本地vue项目的本地调试，如何让其他人也可以访问我的本地项目（同一个局域网下）

要让其他人在同一个局域网下访问你的本地Vue项目，你可以通过以下步骤进行设置：

启动Vue项目：首先，确保你的Vue项目已经启动并且在本地运行。
找到本地IP地址：打开命令行或终端，输入以下命令来找到你的本地IP地址：

对于Windows系统：
```
ipconfig
```
对于macOS或Linux系统：
```
ifconfig
```
找到类似IPv6的条目，并记下对应的IP地址（通常不是127.0.0.1或localhost）。

修改Vue项目的配置：如果你的Vue项目使用了vue-cli，那么你可以在vue.config.js文件中添加以下配置，以允许通过IP地址访问项目：

module.exports = {
  devServer: {
    host: '0.0.0.0', // 允许任何IP地址访问
    port: 8080, // 你的项目端口号
    disableHostCheck: true, // 禁用主机检查
    headers: {
      'Access-Control-Allow-Origin': '*' // 允许跨域访问，根据需要设置
    }
  }
}

如果你没有vue.config.js文件，可以在项目的根目录下创建一个。

重启Vue项目：保存vue.config.js文件后，重启你的Vue项目。
分享IP地址和端口：将你的本地IP地址和Vue项目运行的端口号分享给其他人。例如，如果你的IP地址是192.168.1.100，端口号是8080，那么其他人可以通过在浏览器中输入http://192.168.1.100:8080来访问你的项目。
确保防火墙和网络设置允许访问：在某些情况下，本地防火墙或网络设置可能会阻止其他人访问你的项目。确保你的防火墙设置允许通过指定的端口进行入站连接，并且你的网络没有设置NAT或路由器级别的限制。
测试访问：让其他人尝试访问你提供的IP地址和端口，确保他们能够成功访问你的Vue项目。