必须配置 jsconfig.json(或 tsconfig.json)才能让 vscode 识别 @ 别名,否则 import、router.push()、 中的 @/xxx 均无法补全或跳转;其中 import 行依赖语言服务对模块路径的解析,而 router.push() 等需额外安装 path autocomplete 等插件并精准配置字符串匹配规则。

VSCode 里 router.push() 或 <router-link :to=""></router-link> 中写 @/views/User.vue 报“未找到”,不是代码运行时报错,而是编辑器根本没识别 @ 别名 —— 这属于静态路径解析失败,必须配 jsconfig.json(或 tsconfig.json),否则所有基于别名的跳转、补全、Ctrl+Click 都失效。
为什么 import 能跳转,但 router.push() 不能?
VSCode 的路径提示能力依赖 TypeScript / JavaScript 语言服务,而该服务默认只解析 import 和 require 语句中的字符串字面量。像 router.push('/user') 或 { name: 'User' } 这类运行时调用,不在模块导入上下文中,语言服务不主动处理。
真正能被静态识别并补全的,只有明确走 paths 映射且被语言服务“看见”的地方,例如:
-
component: () => import('@/views/User.vue')—— 这里@/views/User.vue是 import 字符串,jsconfig.json配好后就能跳转 -
import User from '@/views/User.vue'—— 同理,支持补全和 Ctrl+Click -
router.push({ name: 'User' })—— 名字跳转完全无法静态分析,原生不支持补全 -
router.push('/user')—— 路径字符串跳转,需额外插件(如Vue Router Snippets或Path Intellisense)才可能补全
必须配 jsconfig.json 才能启用基础路径提示
没有 jsconfig.json(或 tsconfig.json),@/xxx 在任何地方都不会有补全,包括 import 行。配置后,import 行内路径能补全、能 Ctrl+Click 跳转,这是后续所有功能的基础。
在项目根目录新建 jsconfig.json,内容如下:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
注意要点:
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景,三层路由架构(触发词→SAD反馈→DAG编排),recall@10=96.97%。配置驱动(chains.yaml),零代码扩展。pip install skill-weave-chains 一键安装。
-
baseUrl必须设为".",不能省略或写成"./" -
paths中的@/*和src/*末尾都要带/*,否则映射不生效 - 如果项目用 TypeScript,请用
tsconfig.json,结构一致,只是文件名不同 - 改完后必须重启 VSCode(或执行
Developer: Reload Window),否则不生效
router.push() 里的路径还是点不动?那是运行时路径,得靠插件
jsconfig.json 只解决 import 类路径,对 router.push()、<router-link :to=""></router-link> 中的字符串路径无作用。要让这些地方也能补全和跳转,得靠插件辅助。
推荐两个轻量实用的插件:
-
Vue Router Snippets:提供router.push等常用模板,不解决跳转,但减少手误 -
Path Autocomplete(比Path Intellisense更稳定):开启后,在字符串中输入@/会自动列出src/下所有匹配路径,支持 Tab 补全
启用 Path Autocomplete 后,还需在 VSCode 设置中加一条自定义规则,让它识别 Vue Router 场景:
"path-autocomplete.extensionPaths": [
{ "extension": "vue", "type": "string", "paths": ["router.push", "router.replace", ":to"] }
]
这样,你在 router.push('@/views/...') 或 <router-link :to="'@/views/...'"></router-link> 里输入 @/,就能触发路径补全。
最常被忽略的一点:路径补全和跳转是两层能力。你配了 jsconfig.json,只拿到了第一层(import 行);想让 router.push() 也“点得动”,必须叠加插件,且插件配置要精准匹配字符串出现的位置 —— 少一个引号、多一个空格、写成单引号包双引号,都可能导致补全失效。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










