关于HbuilderX创建Vue3项目的运行失败问题

关于HbuilderX创建Vue3项目的运行失败问题

BUG示例：首先通过HBuiLder X创建项目

创建完成项目后，打开命令行工具执行运行命令：

npm run dev 

BUG出现：

原因分析：使用HBuilderX创建Vue3项目的Vite版本不兼容太老了

---

解决方案：升级Vite版本，HBuilderX创建的Vue3的Vite是2.0版本，过时了

详细步骤如下：

1、查看一下自己本地的Vite版本是不是很低：

npm ls vite
npm ls @vitejs/plugin-vue

输出：发现HBuilderX创建的版本太老

2、查看一下在npm可用的最新版本：

npm view vite version
npm view @vitejs/plugin-vue version

3、去到package.json文件下修改版本：

4、根据自己得到的最新版本，修改红色圈出来的地方后：也可以直接用我的版本值：

5、删除以前的依赖文件和缓存（即删除node_modules和package-lock.json）

# 删除node_modules文件夹
Remove-Item -Recurse -Force node_modules

#删除package-lock.json文件
Remove-Item -Force package-lock.json

6、清理后重新安装依赖，再次运行：会看到项目中这两个文件重新创建了，然后执行项目运行命令

# 执行安装命令
npm install

# 执行运行项目命令,这里是Vue3（Vue2为: npm run serve）
npm run dev

问题解决，项目可以直接点击本地链接端口使用了！！！