Viteconfigure project path alias

webpack Through resolve.alias Define project path alias , In this way, when importing files , No longer need to use relative paths , Unified root path （/src/） As a starting point .

vite It also supports the definition of path alias ：

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

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

If the project is TypeScript To write , It needs to be revised TypeScript Configuration of ：

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

If you've just created TypeScript project , It's possible to meet Module not found “path” Or its corresponding type declaration Error prompt for , install @types/node that will do .

npm install @types/node --save-dev