Vite + Vue3 + TS，配置别名 alias

Vite2 + Vue3 + TS 使用别名时跟 webpack 有所差异

这里记录下 Vite + Vue3 + TS 配置别名

主要是修改 vite.config.ts 和 tsconfig.json

修改

vite.config.ts

export default defineConfig({
  plugins: [vue()],
  alias:{
+   '@':'/src/',
+   '@components':'/src/components/',
+   '@assets':'/src/assets/',
  }
})

tsconfig.json

配完后可以直接使用，但是编辑器会标红，需要修改 tsconfig.json

加上 baseUrl 跟 paths

{
  ...
  "compilerOptions": {
    ...
+   "baseUrl": "./",
+   "paths": {
+     "@/*": ["./src/*"],
+     "@components/*": ["./src/components/*"],
+     "@assets/*": ["./src/assets/*"]
+   }
  },
  ...
}
 

结果

补充

在 vite.config.ts 中，如果使用 __dirname + path 方式写地址的话，如果 TS 报错提示找不到，则需要下载 @types/node

npm i -D @types/node

vite.config.ts

import { resolve } from 'path'
 
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@assets': resolve(__dirname, 'src/assets')
    }
  }
})

Webstorm 仍无法识别？

1. 可能需要在 WebStorm 中配置 TypeScript 解析别名：

• 打开 WebStorm 的 Preferences/Settings。
• 选择 Languages & Frameworks > TypeScript。
• 在“Compiler Options”栏下，将“Experimental support for decorators”和“Use TypeScript service”选项勾选上。
• 在“Additional options”中输入 --baseUrl ./。

2. 可能重新加载 TypeScript 配置才能生效，可以通过 File > Invalidate Caches / Restart 来完成。

最后，撒花🎉🎉🎉