企业官网建设流程全解析

1. 为什么@/写出来是红的，跳转还失效

在 Vue CLI 项目里，@默认就是src的别名，这是脚手架内置的约定。但很多人会遇到一个很割裂的现象：npm run serve能正常跑，浏览器里页面也没问题，可编辑器里import xxx from '@/components/Hello.vue'这行@底下一条红色波浪线，Ctrl+Click 跳不过去，输入@/之后也没有任何路径补全提示。

这个问题的本质是：构建工具（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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=

API 地址是https://taotoken.net/api（这个不加 UTM）。你需要先去控制台创建一个 API Key，后面在编辑器插件和项目配置里都会用到这个 Key。创建 Key 的入口：

API Keys：https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite

拿到 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.alias：

const 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 server，webpack 配置不会热更新。重启后如果页面还能正常跑，说明构建层别名没问题。

3.2 jsconfig.json 的 paths 补全

构建层好了，但编辑器还是不认识@。这时候在项目根目录新建jsconfig.json（TypeScript 项目用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 一般会提示「重新加载窗口」，点一下或者手动Ctrl+Shift+P执行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或 Ctrl+Click。如果跳到了src/components/Hello.vue文件，说明jsconfig.json的paths生效了。跳不过去就检查baseUrl和paths的写法，@/*和src/*的星号不能漏。

第三步，验证输入补全。在import语句里输入@/，看是否弹出文件列表。如果没弹，检查 Path Intellisense 插件的mappings配置，以及插件是否启用。有时候插件被禁用或者和其他补全插件冲突，也会导致不弹。

第四步，验证 AI 辅助补全通道。这一步是接入 TaoToken 之后，让 AI 补全也能理解你的项目路径。在编辑器插件的配置里填好 Key 和 API 地址后，输入@/时除了文件列表，AI 还能根据上下文推荐你可能要引用的组件。具体配置见下一节。

5. 接入 TaoToken：settings.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_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite

配好之后，AI 补全的请求会走 TaoToken 的统一通道，你不需要在多个插件里重复填 Key。如果只是想在网页里先验证模型能不能正常返回，可以用模型对话入口：

模型对话：https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite

长期做编码和 Agent 任务的话，Coding Plan 更适合，额度模型和按次调用不一样：

Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite

6. 本篇常见错排查

配置过程中最容易踩的坑，我整理成对照表，遇到问题直接查。

再补充两个细节。一是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 的问题，其实是本地路径就没配对。