Vite配置文件路径别名并让vscode识别

如果是vue项目，我们可以直接用pnpm create vue@latest创建vue项目，这个vue项目中已经配置好了文件路径别名。
但是我在用vite创建了react项目，这个时候怎么配置文件路径别名呢。

1.viete.config.js配置文件路径别名

可以直接复制下面的代码，就可以配置文件路径别名，@代表了src目录：

// 别忘了导入这个
import { fileURLToPath, URL } from 'node:url'

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

export default defineConfig({
  plugins: [react()],

  // 进行文件路径别名配置
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

2.让vscode识别@别名

最简单的方法就是，在根目录下（注意跟vite.config.js在同级），创建jsconfig.json文件，然后复制下面的代码：

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

就这样vscode就可以识别@了

原理我暂时没研究过，有时间再研究一下，哈哈😁

3.vite-react-typescript项目演示

• 同样在vite.config.ts中进行配置：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

• 然后在tsconfig.app.json中进行配置：

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    // 配置@指向src
    "baseUrl": ".", // 以项目根目录为基准
    "paths": {
      "@/*": ["src/*"] // 将 @/ 映射到 src/ 目录
    }
  },
  "include": ["src"]
}