1. 为什么/写出来是红的跳转还失效在 Vue CLI 项目里默认就是src的别名这是脚手架内置的约定。但很多人会遇到一个很割裂的现象npm run serve能正常跑浏览器里页面也没问题可编辑器里import xxx from /components/Hello.vue这行底下一条红色波浪线CtrlClick 跳不过去输入/之后也没有任何路径补全提示。这个问题的本质是构建工具webpack和编辑器VS Code用的是两套解析逻辑。webpack 通过vue.config.js里的resolve.alias知道指向src所以打包没问题但 VS Code 的 TypeScript/JavaScript 语言服务默认不认识这个别名它只认jsconfig.json或tsconfig.json里的paths映射。两边配置没对齐就会出现「能跑但没提示」的状态。还有一种情况是项目里手动改过vue.config.js把指向了别的目录或者用了configureWebpack而不是chainWebpack导致别名没生效。这篇就按「先让构建层别名正确 → 再让编辑器补全正确 → 最后接入 AI 辅助补全通道」的顺序把每一步的配置和验证方法都写清楚。适合正在用 Vue CLI 做项目、被路径提示折磨过的同学配置可以直接复制。2. 前置准备TaoToken 统一 Key 与项目环境在动手改配置之前先把两件事准备好一个是项目本身的依赖环境另一个是后面 AI 补全要用的统一 Key 通道。项目侧确认你用的是 Vue CLI 创建的项目根目录有vue.config.js或可以新建Node 版本建议 14 以上。如果你还没装path模块其实 Node 内置了path不需要额外npm install path网上很多老教程让你装是因为早期写法问题现在直接require(path)就行。AI 补全侧我用的是 TaoToken 的统一 Key 通道。它的作用是把你项目里要接的 AI 补全、对话、代码生成能力收敛到一个 Key 上不用每个工具单独配一套凭证。官网入口在这里官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 地址是https://taotoken.net/api这个不加 UTM。你需要先去控制台创建一个 API Key后面在编辑器插件和项目配置里都会用到这个 Key。创建 Key 的入口API Keyshttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite拿到 Key 之后先放着第 5 节会讲它在settings.json里具体填到哪个字段。这里提醒一句Key 属于敏感凭证不要提交到 Git 仓库建议放在本地用户级配置或环境变量里。3. 可复制配置alias 骨架 jsconfig paths 补全这一节是核心分三步改vue.config.js、加jsconfig.json、配 VS Code 插件映射。三步都做完的提示和跳转才会完整。3.1 vue.config.js 的 resolve.alias 骨架先看构建层的别名。在项目根目录的vue.config.js里用configureWebpack配置resolve.aliasconst path require(path) function resolve(dir) { return path.join(__dirname, dir) } module.exports { configureWebpack: { name: my-vue-app, resolve: { alias: { : resolve(src) } } } }这里resolve(src)会拼出项目根目录下的绝对路径src比直接写: path.resolve(__dirname, src)更简洁。如果你项目里还有components、assets这类高频目录可以顺手加别名alias: { : resolve(src), components: resolve(src/components), assets: resolve(src/assets) }改完vue.config.js必须重启 dev serverwebpack 配置不会热更新。重启后如果页面还能正常跑说明构建层别名没问题。3.2 jsconfig.json 的 paths 补全构建层好了但编辑器还是不认识。这时候在项目根目录新建jsconfig.jsonTypeScript 项目用tsconfig.json加上baseUrl和paths{ compilerOptions: { baseUrl: ., paths: { /*: [src/*], components/*: [src/components/*], assets/*: [src/assets/*] } }, exclude: [node_modules, dist] }baseUrl设为.表示以项目根为基准paths里的/*对应src/*。注意这里的映射必须和vue.config.js里的 alias 保持一致否则编辑器提示的路径和实际打包的路径会对不上。保存jsconfig.json后VS Code 一般会提示「重新加载窗口」点一下或者手动CtrlShiftP执行Developer: Reload Window。3.3 VS Code 插件映射Path Intellisense如果你用的是 Path Intellisense 插件做路径补全还需要在settings.json里单独告诉它指向哪。打开 VS Code 设置JSON 模式加上{ path-intellisense.mappings: { : ${workspaceRoot}/src } }这里${workspaceRoot}是插件内置变量指向当前打开的工程根目录。配完之后重启 VS Code输入/时插件就会从src目录开始列文件。注意这个映射和jsconfig.json是两套东西jsconfig.json管语言服务的跳转和类型提示Path Intellisense 管输入时的文件候选列表两个都要配。4. 验证 跳转与补全是否生效配置写完怎么确认真的生效了按下面几步验证每一步都有明确的预期结果。第一步验证构建层。在任意.vue文件里写import Hello from /components/Hello.vue然后npm run serve。如果编译通过、页面正常说明 webpack 别名生效。如果报Module not found回去检查vue.config.js的resolve是不是写在了configureWebpack里以及resolve(src)的路径对不对。第二步验证编辑器跳转。把光标放在/components/Hello.vue的上按F12或 CtrlClick。如果跳到了src/components/Hello.vue文件说明jsconfig.json的paths生效了。跳不过去就检查baseUrl和paths的写法/*和src/*的星号不能漏。第三步验证输入补全。在import语句里输入/看是否弹出文件列表。如果没弹检查 Path Intellisense 插件的mappings配置以及插件是否启用。有时候插件被禁用或者和其他补全插件冲突也会导致不弹。第四步验证 AI 辅助补全通道。这一步是接入 TaoToken 之后让 AI 补全也能理解你的项目路径。在编辑器插件的配置里填好 Key 和 API 地址后输入/时除了文件列表AI 还能根据上下文推荐你可能要引用的组件。具体配置见下一节。5. 接入 TaoTokensettings.json 里 Key 字段填哪里前面都是本地路径配置这一节讲 AI 辅助补全的接入。我用的是支持自定义 API 的编辑器插件比如 Continue、Cline 这类核心是把请求指向 TaoToken 的 API 地址并填入统一 Key。以settings.json为例配置片段大概长这样{ aiAssistant.apiBase: https://taotoken.net/api, aiAssistant.apiKey: sk-你的TaoTokenKey, aiAssistant.model: claude-sonnet-4-20250514, aiAssistant.enablePathContext: true }这里要替换的 Key 字段就是aiAssistant.apiKey把sk-你的TaoTokenKey换成你在控制台创建的真实 Key。apiBase填https://taotoken.net/api注意不要带 UTM 参数那是给网页访问用的API 请求不需要。enablePathContext这类开关是让 AI 补全时把当前文件的路径上下文带上这样它推荐/路径时更准。如果你用的是 Claude Code 这类命令行编码工具配置方式类似把 API 地址和 Key 填到对应的环境变量或配置文件里。具体接入文档在这里接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite配好之后AI 补全的请求会走 TaoToken 的统一通道你不需要在多个插件里重复填 Key。如果只是想在网页里先验证模型能不能正常返回可以用模型对话入口模型对话https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite长期做编码和 Agent 任务的话Coding Plan 更适合额度模型和按次调用不一样Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite6. 本篇常见错排查配置过程中最容易踩的坑我整理成对照表遇到问题直接查。现象可能原因解决页面能跑但报红缺jsconfig.json的paths补baseUrlpaths映射改了vue.config.js没反应没重启 dev server停掉重新npm run serve跳转跳到错误文件alias 和 paths 不一致两边映射改成完全相同输入/不弹文件列表Path Intellisense 没配 mappings加path-intellisense.mappingsAI 补全报 401Key 填错或没填检查apiKey字段AI 补全请求超时apiBase带了多余参数改成https://taotoken.net/apiModule not foundalias 写在了错误层级确认在configureWebpack.resolve.alias再补充两个细节。一是jsconfig.json和tsconfig.json不要同时存在且内容冲突TypeScript 项目优先用tsconfig.json把paths写进去就行。二是如果你用了chainWebpack而不是configureWebpack别名写法不一样module.exports { chainWebpack: config { config.resolve.alias .set(, resolve(src)) .set(components, resolve(src/components)) } }两种写法选一种不要混用混用容易出现别名覆盖。排查的时候先看vue.config.js用的是哪种再对应检查。最后说个实际经验路径提示失效十有八九不是插件问题而是jsconfig.json没建或者paths写错。先把构建层和编辑器层两套配置对齐再去接 AI 补全通道顺序反了会以为是 Key 的问题其实是本地路径就没配对。