文章目录
- 前言
- 一、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";// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {"@": path.join(__dirname, "./src/"),},},
});如果你的项目引入path报错，则需要下载
npm i @types/node
二、tsconfig.json
{...其他代码"compilerOptions": {// 路径"baseUrl": ".","paths": {"@/*": ["./src/*"]}},
}
三、可能遇到的问题
- 配置后vscode仍然报语法提示错误，但是项目编译通过。
解决办法：重启vscode - vscode语法提示通过，项目不通过
解决办法：vite.config.ts中alias配置指定的地址如"@": path.join(__dirname, "./src/"),要使用path.join方法处理，用相对路径的话，在编译时可能文件处于的路径会改变。
)
