Vue.js Chrome扩展开发问题：Vite开发服务器无法启动

排查步骤及解决方案 #

1. 降级Node版本适配Vite 3.x #

Vite 3.1.6官方支持Node版本为14.18.0+、16.0.0+，Node 20与该版本Vite存在兼容性冲突：

• 用nvm（Windows版）切换到Node 18.x稳定版：

  nvm install 18.17.1
  nvm use 18.17.1
  

• 重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

2. 修正Vite HMR配置错误 #

当前hmr.host配置包含完整URL，不符合Vite要求，需改为仅主机名：
修改vite.config.ts中server.hmr部分：

server: {
  watch: {
    usePolling: true,
  },
  port,
  hmr: {
    host: 'localhost', // 移除http://和端口，仅保留主机名
    port: port, // 显式指定HMR端口
  },
},

3. 检查端口占用情况 #

确认配置中的port未被其他程序占用：

• 命令提示符中执行（假设port为3333）：

  netstat -ano | findstr :3333
  

• 若发现占用，杀死对应进程（替换<PID>为查询到的进程ID）：

  taskkill /F /PID <PID>
  

• 或修改scripts/utils.ts中的port变量为其他未被占用的端口（如3001）。

4. 调整并行启动脚本顺序 #

当前run-p dev:*同时启动多任务，可能导致Vite未就绪时页面已加载：
修改package.json的scripts，先启动Vite服务再执行其他任务：

"scripts": {
  "dev": "npm run clear && cross-env NODE_ENV=development npm run dev:prepare && npm run dev:web & npm run dev:js & npm run dev:bg",
  "dev:prepare": "esno scripts/prepare.ts",
  "dev:web": "vite dev",
  "dev:js": "npm run build:js -- --mode development",
  "dev:bg": "tsup --watch ./src",
}

5. 排查MV3HMR插件兼容性 #

自定义MV3Hmr插件可能存在适配问题：

• 暂时注释插件，重新启动服务器：

  plugins: [
    ...sharedConfig.plugins!,
    // MV3Hmr(), // 暂时注释
  ],
  

• 若服务器恢复正常，需检查插件代码中的路径、权限逻辑，更新以适配当前Vite版本或Windows环境。

6. 验证文件系统权限与路径 #

• 确保项目文件夹路径无中文、空格或特殊字符（如C:\Users\用户名\Desktop\chrome-extension-project）。
• 以管理员身份运行命令提示符，重新执行npm run dev，避免权限不足导致Vite无法访问文件。

内容的提问来源于stack exchange，提问作者Gulshan S