从Symfony Encore迁移至Vite遇Vue依赖无法解析问题求助

问题分析 #

错误提示vue (imported by /root/Gyant/vocwebmanager/web/vwm/js/app.js)无法解析，通常由以下原因导致：

• Vue核心依赖未安装或安装不完整
• Vite的根目录（root）配置错误，导致模块解析路径异常
• 缓存干扰了依赖解析

解决方案 #

1. 确认Vue核心依赖已安装 #

从Symfony Encore迁移到Vite后，需要手动安装Vue核心包（Encore可能之前帮你处理了依赖，但Vite需要显式安装）：

npm install vue@latest
# 或使用yarn
yarn add vue@latest

同时确保@vitejs/plugin-vue已安装：

npm install @vitejs/plugin-vue --save-dev

2. 修正Vite的根目录配置 #

你的vite.config.js中root: '/assets'是绝对路径，大概率与实际项目结构不匹配，导致Vite无法从正确位置查找node_modules中的Vue。将其修改为项目根目录的相对路径：

root: path.resolve(__dirname, './'),

（若你的资源入口逻辑有特殊要求，也可根据Symfony项目结构调整为对应目录，但优先推荐设为项目根目录以保证模块解析正常）

3. 清除Vite缓存并重启服务 #

Vite的依赖预构建缓存可能导致异常，执行以下命令清除缓存后重启服务：

rm -rf node_modules/.vite
npm run dev

修改后的vite.config.js关键部分示例 #

export default defineConfig({
  // ...其他配置
  root: path.resolve(__dirname, './'), // 修正为项目根目录
  // ...其他配置
});

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