vite项目配置路径别名

使用vite开发vue3项目时，如果想要配置路径别名，可以通过下面的几个步骤进行配置。

首先，因为开发环境是ts，并且还要使用到node中的path模块，所以需要先安装一下node的类型声明文件。

npm i -D @types/node

安装完成后，就可以在vue.config.ts中增加如下的配置。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

最后再修改一下tsconfig.json文件即可：

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

注意，修改完成后要重启服务。