离线安装Volar或Vetur后.vue文件无高亮或补全，根本原因是插件仅提供语法支持框架，必须配套tsconfig.json/jsconfig.json、@types/vue类型库及.vscode/settings.json中files.associations配置，并手动触发语言模式选择和重启语言服务器。

VSCode 离线安装插件无法直接“识别 Vue 文件”——Vetur 或 Volar 插件本身不提供离线语言服务核心，必须配合 TypeScript/JavaScript 语言服务器、类型定义（@types/vue）和项目级配置才能启用智能提示。单纯拷贝 .vsix 文件只是完成第一步。

离线安装 .vsix 插件后为什么.vue文件仍无高亮或补全？

常见现象：双击打开 .vsix 安装成功，但打开 App.vue 时顶部语言模式仍是 Plain Text，没有语法高亮，ref()、v-model 等无提示，F12 跳转失败。

• VSCode 未激活对应语言模式：安装插件后需手动触发一次“选择语言模式”（Ctrl+K M → 输入 vue → 回车），否则不会加载插件逻辑
• Volar（Vue 3 推荐）依赖 TypeScript Server，若项目无 tsconfig.json 或离线未预装 TS 类型库，defineComponent、Props 等类型推导会静默失效
• Vetur（Vue 2 兼容）默认禁用 script 部分的 TS/JS 校验，需在 settings.json 中显式开启："vetur.validation.script": true
• 离线环境缺少 @types/vue，导致 ref、computed 等 API 无类型信息，智能提示退化为纯字符串匹配

离线环境下必须补全的三个关键文件/配置

仅靠 .vsix 插件包远远不够。以下三项缺一不可，且需按顺序准备：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 项目级类型定义：提前在联网机器运行 npm install --save-dev @types/vue（Vue 3）或 @vue/runtime-dom（组合式 API），将 node_modules/@types 整个目录拷入离线项目 node_modules 下
• 语言服务配置文件：Vue 3 项目必须有 tsconfig.json（哪怕空内容），Vue 2 项目建议加 jsconfig.json 并含 "checkJs": true
• 工作区 settings.json：在项目根目录建 .vscode/settings.json，至少包含：

  {
    "files.associations": {
      "*.vue": "vue"
    },
    "typescript.preferences.includePackageJsonAutoImports": "auto"
  }

Vetur 和 Volar 在离线场景下的实际差异

不是“选哪个更好”，而是“哪个更可能在离线跑通”：

立即学习“前端免费学习笔记（深入）”；

• Volar：Vue 官方维护，对 defineProps、defineEmits 的类型提取强依赖 TS 语言服务。离线若没配好 tsconfig.json + @types/vue，script 区域几乎无提示，但 template 区域的指令补全（如 v-if）仍可用
• Vetur：不强依赖 TS，JS 项目也能启用基础校验。离线时只要 settings.json 开启 vetur.validation.*，template/script/style 三块都能有基础高亮和语法检查，但组合式 API 类型提示弱于 Volar
• 冲突处理：两者不能共存。若离线机器已装 Volar，再装 Vetur 会导致语言模式混乱，必须通过命令面板执行 Developer: Reinstall Extension 清理缓存，或删掉 ~/.vscode/extensions 下冲突插件目录

离线环境最易被忽略的点：插件安装后 VSCode 不会自动重载语言服务器，必须手动执行 Developer: Restart Language Server（Ctrl+Shift+P 输入该命令），否则所有配置都只是“写在纸上”。