Vite与Vue CLI项目启动报错求助：无法解析HTML文件及依赖

一、Vite项目报错修复 #

你的Vite配置文件存在配置结构错误，误将Webpack的配置逻辑套用到Vite上，这是核心问题：

1. Vite默认支持.html作为入口文件，不需要额外安装html-loader
2. 你在resolve下嵌套了多余的resolve和module字段，这是Webpack专属配置项，Vite无法识别

修正后的Vite配置文件：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    // Vite的extensions配置直接写在resolve下，无需嵌套
    extensions: ['.js', '.ts', '.vue', '.json', '.html']
  }
})

后续操作：

• 删除多余依赖：执行 npm uninstall html-loader
• 删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock）
• 重新安装依赖：npm install
• 重启开发服务：npm run dev

二、Vue CLI项目报错修复 #

该报错是Webpack找不到webpack-dev-server的客户端文件，大概率是依赖安装不完整或缓存问题，按以下步骤处理：

1. 删除项目的node_modules文件夹和package-lock.json
2. 清理npm缓存：npm cache clean --force
3. 重新安装依赖：npm install
4. 若仍报错，检查Node版本是否符合要求：Vue CLI推荐使用Node 14+，可通过nvm切换稳定版本
5. 尝试手动安装缺失依赖：npm install webpack-dev-server --save-dev

三、关于你猜测的原因验证 #

• Windows安全设置：除非修改过系统文件权限或启用严格杀毒隔离，一般不会影响依赖安装，可暂时排除
• Node安装问题：通过node -v和npm -v检查版本是否正常，若版本过低或安装不完整，建议卸载后重新安装官方稳定版
• 依赖文件损坏：该概率较高，通过删除node_modules和锁文件重新安装即可解决

内容的提问来源于stack exchange，提问作者omar yaser