Vite + TS import alias 配置

767 阅读1分钟

1、在 vite.config.ts 文件中加入如下配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const { resolve } = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, 'src')
      }
    ]
  }
})

如果 const { resolve } = require('path') 这一句 require 报错,可以在终端运行

pnpm i --save-dev @types/node

2、在 tsconfig.json 加入配置

{
  "compilerOptions": {
    ...

    "baseUrl": ".",
    "paths": {
      "@/*": [ "src/*" ],
    }
  }
}

3、即可在 ts 文件中直接使用 import x from '@/components/Foo.ts'