Vue3+Ts+Vite项目——配置@路径别名，实现@代替/src

Vue3+Ts+Vite项目——配置@路径别名，实现@代替/src

第一步安装

npm install @types/node -D

如果是vue下载  @vitejs/plugin-vue
如果是react下载 @vitejs/plugin-react

第二步替换 vite.config.ts文件

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //注意react要替换成react()
  resolve:{
        // 自动补全文件扩展名
    extensions: [".js", ".jsx", ".ts", ".tsx"],
    // 路径别名 - 配合tsconfig.json中path一起使用
    alias: {
      "@": resolve(__dirname, "./src"),
      "@api": resolve(__dirname, "./src/api"),
      "@comps": resolve(__dirname, "./src/components"),
      "@pages": resolve(__dirname, "./src/pages"),
    },
  },
})

第二步 tsconfig.json文件,增加配置

 "jsx": "preserve",
    /* 别名配置 */
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@api/*": ["./src/api/*"],
      "@comps/*": ["./src/components/*"],
      "@pages/*": ["./src/pages/*"]
    },

结束!!!