Vite/React项目执行npm run dev命令启动失败求助

问题场景 #

• 执行命令路径：

  PS C:\Users\PICHAU\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs\home\viceek\ProjetoI\front-end> npm run dev
  

• 执行输出：

  front-end@0.0.0 dev
  vite
  

• 错误信息：

  无法加载配置文件 C:\Users\PICHAU\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs\home\viceek\ProjetoI\front-end\vite.config.ts
  启动开发服务器时出错：
  Error [ERR_MODULE_NOT_FOUND]: 无法找到从 C:\Users\PICHAU\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs\home\viceek\ProjetoI\front-end\vite.config.ts.timestamp-1665345725237.mjs 导入的 'vite' 包
  at new NodeError (node:internal/errors:393:5)
  at packageResolve (node:internal/modules/esm/resolve:860:9)
  at moduleResolve (node:internal/modules/esm/resolve:909:20)
  at defaultResolve (node:internal/modules/esm/resolve:1124:11)
  at nextResolve (node:internal/modules/esm/loader:163:28)
  at ESMLoader.resolve (node:internal/modules/esm/loader:837:30)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
  at ModuleWrap. (node:internal/modules/esm/module_job:76:40)
  at link (node:internal/modules/esm/module_job:75:36)

当前vite.config.ts内容 #

import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

修复方案 #

1. 补充vite核心模块导入 #

配置文件中使用了defineConfig函数，但未从vite包导入，导致Vite无法解析配置。修改后的配置文件如下：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

2. 重新安装依赖 #

如果修改配置后仍报错，执行以下命令确保依赖完整：

rm -rf node_modules package-lock.json
npm install

3. 修正WSL执行路径 #

当前路径混合了Windows和WSL格式，可能导致文件解析异常。直接在WSL终端切换到项目的WSL原生路径（如/home/viceek/ProjetoI/front-end）后，再执行npm run dev。

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