Vite + Vue3 + TS，配置别名 alias

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