vite使用@/路径

分为两个步骤

1,vite.config.js页面中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
...
import path from 'path' //1导入

export default defineConfig({
  plugins: [vue()],
  ...
  resolve: { //2使用
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

2,在vite.config.js平级新建文件

config.json

内容如下

代码如下

{
    "compilerOptions": {
      "target": "esnext",
      "useDefineForClassFields": true,
      "module": "esnext",
      "moduleResolution": "node",
      "strict": true,
      "jsx": "preserve",
      "sourceMap": true,
      "resolveJsonModule": true,
      "esModuleInterop": true,
      "lib": ["esnext", "dom"],
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
  }
  

接下来使用@/的方式就可以寻找src的内容了