vite构建的项目“@”地址无法解析问题

使用vite构建项目后，发现无法识别”@”地址：

经过排查是由于config文件中没有配置”@”对应的路径：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
})

打开vite.config.ts文件，改成：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)) //这里的配置就是可以让@可以读取成'./src'
    }
  }
})

中间的reslove的alias所包含的就是”@”的配置项，这样我们就可以用@来代替./src。