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

前言

一.vite.config.ts

二.tsconfig.json

[三. 别名配置成功，但语法提示爆红问题](#三. 别名配置成功，但语法提示爆红问题)

四、可能遇到的问题

前言

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

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

`一.vite.config.ts`

TypeScript 复制代码

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报错，则需要下载

bash 复制代码

npm i @types/node

`二.tsconfig.json`

bash 复制代码

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

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

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

如果出现这种情况、那么大概率是 tsconfig.json 中的 compilerOptions 配置被覆盖了。

可以通过以下手段排查。

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

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

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

bash 复制代码

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

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

bash 复制代码

 "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

	/* Linting */
    "strict": true,
	"noUnusedLocals": true,
    "noUnusedParameters": true,
	"noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
  },

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

bash 复制代码

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

重启 vscode!!!

四、可能遇到的问题

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

解决办法：重启vscode

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

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