vue3项目如何配置能显示局域网之内的ip网址

朴灿烈づ我的快乐病毒、 2024-04-29 00:35 2阅读 0赞

在Vue 3项目中，如果你想要配置项目使其可以通过局域网内的IP地址被访问，通常需要修改开发服务器的配置，使其监听所有网络接口。下面是如何进行配置的步骤：

1.  **修改`vue.config.js`文件**: 首先，确保你的项目根目录下有一个`vue.config.js`配置文件。如果没有，你需要创建一个。在这个文件中，你可以指定开发服务器的配置选项。
2.  **配置`devServer`**: 在`vue.config.js`文件中，你可以通过`devServer`属性来配置开发服务器。要使项目能够通过局域网内的IP地址访问，你需要设置`host`为`0.0.0.0`。这样，开发服务器将监听所有网络接口。

以下是一个配置示例：

module.exports = {
        
      devServer: {
        
        host: '0.0.0.0',
        port: 8080, // 可选，如果你想指定一个不同的端口
        public: '你的局域网IP:端口', // 可选，帮助开发服务器确定被访问的URL
        disableHostCheck: true, // 可选，绕过主机检查，不推荐生产环境中使用
      },
    };

1.  **查找你的局域网IP地址**: 你需要知道你的电脑在局域网内的IP地址。这可以通过在命令行中运行`ipconfig`（Windows）或`ifconfig`（macOS/Linux）命令来查找。你应该找到一个类似于`192.168.x.x`的地址。
2.  **运行你的Vue项目**: 使用命令`npm run serve`或`yarn serve`启动你的开发服务器。
3.  **通过局域网IP访问**: 现在，你的Vue项目应该可以通过局域网内的任何设备访问了。只需在设备的浏览器中输入步骤3中找到的IP地址和你在配置中指定的端口号（例如`192.168.1.2:8080`）。

确保你的防火墙设置允许通过指定的端口进行通信，这样局域网内的其他设备才能访问你的项目。  
![在这里插入图片描述][a17da3e0afbd4841a6ab2f0674e7fd3d.gif_pic_center]

[a17da3e0afbd4841a6ab2f0674e7fd3d.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/0cf00e7db20c4250b65debc970242047.gif