离线Vue开发需启用Volar的takeOverMode并配置tsconfig.json/jsconfig.json,确保node_modules含类型声明,禁用所有联网功能。

离线环境里 Vue 代码提示能用,但必须提前配好本地语言服务和类型定义,不能依赖网络下载或动态插件更新。
Volar 必须启用 takeOverMode 才能离线工作
Volar 默认不接管 TS/JS 语言服务,离线时更不会自动拉远程类型库。不开启 volar.takeOverMode,<template> 里的 ref()、computed() 就是 any,跳转失效,补全空白。
- 在
.vscode/settings.json中显式加这一行:"volar.takeOverMode": true - 重启 VSCode 窗口(不是重载),否则设置不生效
- 确认右下角状态栏显示的是「TypeScript Version: Workspace」,不是「Bundled」——后者是 VSCode 自带的阉割版,离线时连基础泛型都推导不了
tsconfig.json 或 jsconfig.json 缺一不可
离线环境下,Volar 完全靠这两个文件做路径解析、类型映射和全局声明识别。没有它们,@/components 跳转失败、defineProps<{…}>() 报红、shims-vue.d.ts 不被加载,全是必然结果。
- Vue 3 + TS 项目:必须有
tsconfig.json,且含"include": ["src/**/*", "src/**/*.d.ts"]和"types": ["vue"] - Vue 2 或纯 JS 项目:必须有
jsconfig.json,且"compilerOptions": {"allowJs": true, "checkJs": true} - 路径别名(如
@/)必须写进compilerOptions.paths,且值为相对路径(如["src/*"]),不能用../src或绝对路径
离线时禁用所有联网型功能
某些插件或设置会默认尝试请求 CDN、检查更新、拉取远程 schema,离线后卡住语言服务,导致整个提示延迟甚至崩溃。
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记(深入)”;
- 关闭
volar.trace.server(设为off),否则日志里满屏Failed to fetch - 禁用 Vetur(彻底卸载,不止禁用),它会在后台尝试连接旧版 Vue 服务器
- 清空 Prettier 的
prettier.vueFilesSuffixes,避免它试图加载外部 Vue 语法解析器 - ESLint 插件必须搭配本地
.eslintrc.cjs或eslint.config.js,不能只装插件不配规则文件,否则 Problems 面板永远空
离线前最后一步:预装 node_modules 类型声明
VSCode 的语言服务不读 package-lock.json,但会扫描 node_modules 下的 types 和 index.d.ts。如果离线前没装过依赖,或删了 node_modules,Volar 就找不到 vue、vue-router、pinia 的类型定义。
- 确保离线前已在项目根目录执行过
npm install(或yarn install),且node_modules/vue存在dist/vue.d.ts或types/index.d.ts - 若用 pnpm,确认
pnpm store已初始化,并在项目中执行过pnpm install,否则硬链接缺失,类型路径解析失败 - 检查
node_modules/.pnpm或node_modules/vue/node_modules是否意外嵌套了另一份 vue —— 版本冲突会导致 Volar 加载错的类型文件
离线 Vue 开发最常被忽略的点:不是插件没装,而是 tsconfig.json 没覆盖 shims-vue.d.ts,或者 node_modules/vue 里压根没类型文件。这两处一漏,整个智能提示链就断在第一步。

















