vue项目 Network: unavailable的解决办法

╰半橙微兮° 2023-07-06 11:38 14阅读 0赞

vue项目 Network: unavailable 问题。

> 问题描述：使用vue3.0+的版本，在自己电脑上开发项目，启用项目后，只能用localhost访问项目，十分不便，不能使用手机浏览器或其他人访问，如下图所示。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
**解决方案：**

> 在devServer配置里面添加public，如下代码所示。 public:‘172.20.3.3:8080’,

devServer: { // 环境配置
            host: '0.0.0.0',
            public:'172.20.3.3:8080',
            port: 8080,
            https: false,
            hotOnly: false,
            disableHostCheck:true,
            open: true // 配置自动启动浏览器
         
        },

最终问题解决。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200218110415812.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200218112239243.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70