vue 2 项目必须用 vetur，vue 3 项目必须用 volar；二者底层架构不兼容，混用会导致语法高亮错乱、跳转失效、类型丢失；volar 启用后须禁用 vetur，并配置 tsconfig.json/jsconfig.json 支持路径别名。
Vue 2 项目必须用 Vetur，Vue 3 项目必须用 Volar
Vue 2 和 Vue 3 的语法解析、类型推导、模板绑定机制完全不同，Vetur 基于旧版 Vue Language Service（已停止维护），只支持 Vue 2 的 <template></template> 语义分析和 vue@2.x 类型定义；Volar 是 Vue 官方推荐的现代语言工具，深度集成 vue-tsc 和 @vue/language-core，原生支持组合式 API、<script setup></script>、响应式推导和跨文件组件引用。混用会导致语法高亮错乱、Ctrl+Click 跳转失效、ref() 类型丢失——这不是配置问题，是底层架构不兼容。
Volar 启用后必须禁用 Vetur
VSCod e 插件冲突检测很弱，两个插件同时启用时，Vetur 会劫持 .vue 文件的语言模式，导致 Volar 的类型服务完全不生效。手动操作步骤如下：
- 打开 VSCode 扩展面板，搜索
Vetur，点击右下角齿轮图标 → 选择Disable (Workspace)或Disable (Global) - 确认状态栏右下角显示的语言模式为
Vue (Volar)，不是Vue或Vue (Vetur) - 重启 VSCode（仅重载窗口不够，Volar 的语言服务器需冷启动）
- 打开一个
.vue文件，检查Ctrl+Space是否能提示defineProps和defineEmits的泛型参数
Volar 需要配合 jsconfig.json 或 tsconfig.json 才能正确解析路径别名
Volar 不读取 vite.config.ts 中的 resolve.alias，必须在项目根目录提供标准的 TS/JS 配置文件，否则 @/components/xxx 会标红、跳转失败、类型无法识别。
示例 tsconfig.json 片段：
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
注意点：
-
baseUrl必须显式设为"."，不能省略或写成"" -
paths的 key 必须带尾部/*，value 也必须以src/*形式结尾 - 如果项目用 JS + JSDoc，必须用
jsconfig.json，且内容结构与上面一致 - Volar 0.47+ 支持
compilerOptions.types自动引入@vue/runtime-dom，但前提是tsconfig.json存在且被识别
Vue 2.7 这种“过渡版本”要特别小心
Vue 2.7 同时支持 Options API 和 Composition API，但它的类型系统仍是 Vue 2 的底座。Volar 默认按 Vue 3 模式加载，会导致 setup() 返回值类型错误、defineComponent() 推导不准。解决方案只有两个：
- 降级使用 Vetur（仅限纯 Vue 2.7 项目，不混用 Vue 3 生态）
- 升级到 Vue 3，并用
@vue/compat迁移（推荐长期方案）
没有“让 Volar 兼容 Vue 2.7”的中间配置——它的语言服务器根本不认识 Vue.extend 或 Vue.component 的声明合并逻辑。
真正容易被忽略的是：即使你只写了 <script setup></script>，只要 package.json 里 vue 版本是 ^2.7.0，Volar 就会拒绝提供完整支持。看版本号比看语法更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
