vite配置项目路径别名

webpack中可以通过resolve.alias定义项目路径别名，这样可以在引入文件时，不再需要使用相对路径，统一以根路径（/src/）作为起点。

vite同样支持路径别名的定义：

// vite.config.js/ts
import { join } from "path";
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': join(__dirname, "src"),
    }
  }
})

如果项目是TypeScript编写，还需要修改一下TypeScript的配置：

{
   // ...
  "compilerOptions": {
    // ...其他配置
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  // ...
}

如果你是刚创建的TypeScript项目，有可能会遇到找不到模块“path”或其相应的类型声明的错误提示，安装@types/node即可。

npm install @types/node --save-dev