创建第一个VUE3项目【运行后访问无法响应问题怎么解决】

最近在学习前端开发，现在都在使用VUE3框架，所以使用VUE3来创建项目脚手架，新手刚开始从搭建环境就会出现各种小问题哦，不过都是可以一 一攻克的，现在将第一个遇到的问题记录一下，也可以给其他遇到这个问题的新手们参考哦~

首先环境搭建：

安装Node.js具体见Node.js安装过程，此处不再赘述

安装VScode具体见VScode安装过程

软件安装完成后创建VUE3项目，创建命令如下：

此处可以参考官网介绍： https://cn.vuejs.org/guide/quick-start.html

创建完VUE3项目后，在VScode中打开项目，在终端输入npm run dev运行项目，如下截图

 

 复制http://localhost:5173/ 在浏览器访问，提示该网页无法运行。。。

在终端运行项目处有一段灰色提示：Network: use --host to expose

开始以为是端口被占用，在控制台输入netstat -ano | findstr 5173来验证是否占用，经过验证没有被占用，所以不是端口问题。

最后经过验证，针对无法访问问题的解决办法如下：

 1、修改 package.json 文件，如下截图：

在 dev 和 preview 增加 --host 参数

2、修改  vite.config.ts（或 vite.config.js）文件，如下截图：

添加内容：

 server:{

        host:'0.0.0.0',     

  },

注意：上面可以复制，最后的逗号不能少哦！！！

以上两个文件修改完成后，在终端 再次输入npm run dev 启动项目，此时问题解决啦，http://localhost:5173/ 就可以访问了。

 

出现这个网页无法访问的原因是：根据终端提示内容  Network: use --host to expose，需要服务使用 host 来进行暴露，即要将服务暴露成“IP + 端口号”进行访问。

以上为创建项目使用时第一个遇到的问题，希望大家可以共同进步，有任何问题欢迎留言。