Vite项目npm run dev仅首次可用，求永久解决方案

针对你遇到的问题——首次安装依赖后可正常启动服务，但重启命令行后执行npm run dev报错无法加载vite.config.js、服务停止，无需反复重装依赖的永久解决方案如下：

1. 确认Node.js版本一致性 #

重启命令行后可能因版本管理工具（如nvm、n）自动切换了Node版本，导致依赖加载不兼容：

• 执行node -v确认当前版本为20.5.0
• 若版本不一致，切换回20.5.0（如nvm用户执行nvm use 20.5.0）
• 可在项目根目录创建.nvmrc文件，写入20.5.0，确保每次进入目录自动切换版本

2. 清理并修复npm缓存 #

缓存损坏是这类问题的常见诱因：

• 执行npm cache clean --force强制清理缓存
• 直接执行npm install重新安装依赖（无需删除node_modules和package-lock.json）
• 再次尝试npm run dev

3. 检查vite.config.js文件状态 #

确保配置文件未损坏或权限异常：

• 确认vite.config.js文件存在且内容完整，可通过命令行执行cat vite.config.js（Windows用type vite.config.js）查看内容
• 若文件权限不足（Linux/macOS环境），执行chmod +r vite.config.js添加可读权限
• 排查是否有编辑器自动添加了特殊字符（如BOM头），可重新复制粘贴原始配置内容覆盖文件

4. 排查项目路径问题 #

项目路径包含中文、空格或特殊符号可能导致Vite加载配置失败：

• 将项目移动到路径简单的目录（如D:\vue-project或~/vue-project）
• 重新进入项目目录执行npm run dev

5. 禁用Node模块缓存验证 #

若以上方法无效，可临时禁用模块缓存确认是否为缓存问题：

• 执行node --no-cache node_modules/vite/bin/vite.js启动服务
• 若服务正常启动，说明是模块缓存导致，重复步骤2清理缓存即可

附：你的配置文件参考 #

package.json

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/eslint-config-prettier": "^9.0.0",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "normalize.css": "^8.0.1",
    "prettier": "^3.2.5",
    "sass-embedded": "^1.79.4",
    "vite": "^5.3.1"
  }
}

vite.config.js

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

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