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



 
  

   
   npm run dev 
  

 



BUG出现：




image-20260424113018684


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




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


详细步骤如下：


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





 
  

   
   npm ls vite
  

  

   
   npm ls @vitejs/plugin-vue
  

 



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




image-20260424114817286


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





 
  

   
   npm view vite version
  

  

   
   npm view @vitejs/plugin-vue version
  

 



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




image-20260424114223327


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




image-20260424120626987


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
  

 





image-20260424121003720
 
  

        # 服务器
      
        # 音视频
      
  
 
 Logo 
亚马逊云科技技术品牌专区
 
 
 
  
更多推荐
  
 
Kiro Editor 开发实战：使用 Cargo 构建、测试与性能优化指南
 
欢迎来到这篇终极指南，我们将深入探索如何使用Rust构建高性能的终端文本编辑器Kiro Editor。无论你是Rust新手还是经验丰富的开发者，这篇完整教程将带你了解如何利用Cargo工具链进行高效的开发、测试和性能优化，打造一款快速、轻量且功能强大的UTF-8文本编辑器。## 什么是Kiro Editor？Kiro Editor是一款使用Rust编写的极简终端文本编辑器，它最初是著名编辑
 
avatar 亚马逊云科技技术品牌专区
 
 
2026年量化工具选择，要跟着能力基础走
 
读者应理解，选择工具前要先判断自己的能力基础和当前任务。工具应该帮助自己补上当前最关键的缺口，而不是替代学习顺序本身。
 
avatar 亚马逊云科技技术品牌专区
 
 
近期零基础学量化，先按基础差异拆学习顺序
 
读者应明白，拆解学习顺序时要先看自己的基础缺口，再决定哪一段需要放慢。不同流程阶段都有不同检查任务，学习路线要能反映这些差异。
 
avatar 亚马逊云科技技术品牌专区