相对路径别名配置，使用 @ 代替 src
# 一、安装 @types/node
import path from 'path'时，vscode 会出现波浪线，编译时会报错：TS2307: Cannot find module 'path' or its corresponding type declarations.
安装 @types/node 即可
pnpm i @types/node -D |
# 二、更改 vite.config.ts 文件
# 1. 写法一
import { join } from 'path' | |
function resolve(dir: string):string { | |
return join(__dirname, dir) // 可以用 process.cwd () path.join () 和 path.resolve () | |
} | |
export default defineConfig({ | |
plugins: [vue()], | |
resolve: { | |
alias: { | |
'@': resolve('/src'), | |
'#': resolve('/types'), | |
} | |
} | |
}) |
# 2. 写法二
import { defineConfig } from "vite" | |
import vue from "@vitejs/plugin-vue" | |
import path from "path" // 这个 path 用到了上面安装的 @types/node | |
// https://vitejs.dev/config/ | |
export default defineConfig({ | |
plugins: [vue()], | |
// 这里进行配置别名 | |
resolve: { | |
alias: { | |
"@": path.resolve("./src"), // @代替 src | |
}, | |
}, | |
}) |
# 3. 写法三
import path from "path" | |
const pathSrc = path.resolve(__dirname, "src") | |
export default ({ mode }: ConfigEnv): UserConfig => { | |
const env = loadEnv(mode, process.cwd()) | |
return { | |
resolve: { | |
alias: { | |
"@": pathSrc | |
}, | |
}, | |
server: {} | |
plugins: [] | |
} | |
} |
# 三、修改 tsconfig.json 或 tsconfig.app.json
因为 typescript 特殊的 import 方式，需要配置允许默认导入的方式，还有路径别名的配置
// tsconfig.json | |
{ | |
"compilerOptions": { | |
"baseUrl": ".", // 解析非相对模块名称的基本目录，相对模块不会受到 baseUrl 的影响，默认是当前目录，也可以写成 "./" | |
"paths": { // 路径映射，相对于 baseUrl | |
"@/*": ["src/*"], | |
"#/*": ["types/*"], | |
}, | |
"allowSyntheticDefaultImports": true // 允许默认导入 | |
} | |
} |
重启 vscode 生效
