【解决】Vue + Vite + TS 配置路径别名成功仍爆红

目录

前言

一.vite.config.ts

二.tsconfig.json

三. 别名配置成功，但语法提示爆红问题

四、可能遇到的问题

---

前言

‌在项目中设置路径别名后仍然出现爆红问题，通常是由于配置不完整或配置错误导致的。Vite 中配置 alias 总共需要配置两个地方:

• vite.config.ts：让代码编译通过
• tsconfig.json：让代码编辑器语法验证通过

一.vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";export default defineConfig({plugins: [vue()],resolve: {alias: {// 相对路径别名配置，使用 @ 代替 src"@": path.join(__dirname, "./src"),},},
});

如果你的项目引入path报错，则需要下载

npm i @types/node

二.tsconfig.json

{...其他代码"compilerOptions": {// 路径"baseUrl": ".","paths": {"@/*": ["./src/*"]}},
}

三. 别名配置成功，但语法提示爆红问题

你可能会发现，明明使用别名后，模块能够正常引入运行，但是语法提示就是爆红。

如果出现这种情况、那么大概率是 tsconfig.json 中的 compilerOptions 配置被覆盖了。
可以通过以下手段排查。

1. 查看 vscode 对 ts 配置加载的文件

   可以明显的看到，加载完 tsconfig.json 文件后，还加载了 tsconfig.app.json 配置文件

2.  查看 vscode 默认加载的 tsconfig.json 文件可以发现，它引入了tsconfig.app.json 文件

   {"files": [],"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }],"compilerOptions": {"baseUrl": ".", // 解析非相对模块的基地址，默认是当前目录"paths": {//路径映射，相对于baseUrl"@/*": ["src/*"]},"allowSyntheticDefaultImports": true},
   }

3. 查看 tsconfig.app.json 文件我们可以发现，它也有一个 compolerOptions 配置，这样它就把 tsconfig.json 中的配置覆盖掉了

    "compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true,},
   

4. 找到问题，我们直接把对应的配置放到 tsconfig.app.json 中即可

   "compilerOptions":{... 其他配置"baseUrl":".","paths":{"@/*":["src/*"],"@/*":["./src/*"],// 这样也可以，路径正确即可}
   }
   

5. 重启 vscode!!!

四、可能遇到的问题

1. 配置后 vscode 仍然报语法提示错误，但是项目编译通过。

        解决办法：重启vscode

1. vscode 语法提示通过，项目不通过

        解决办法：vite.config.ts 中 alias 配置指定的地址如"@": path.join(__dirname, "./src"),要使用  path.join 方法处理，用相对路径的话，在编译时可能文件处于的路径会改变。