vue3 项目中配置路径别名报错Error: Dynamic require of "path" is not supported 的解决方案

报错问题

在vite.config.ts中配置路径别名时

import { defineConfig } from 'vite'
import vue from '@Vitejs/plugin-vue'
// 使用commonJS导入path
const path = require('path')
// https://Vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    // 配置路径别名
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
    },
    server: {
        port: 3000,
    },
})

配置完重启之后控制台报错：failed to load config from C:\Users\83527\Desktop\学习\vue3\vue-rabbit\vite.config.ts error when starting dev server: Error: Dynamic require of "path" is not supported

原因

经过多方查找，发现是因为vite版本升级到3.1.0，

此时已经不支持commonJS的方法导入path

解决方案

使用ES6的写法导入path