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')
    }
  }
})

🎉