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

舒一笑2024-03-06 23:10

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

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

以下是一个配置示例：

javascript 复制代码

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

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