Vite 配置报错：'ERR_REQUIRE_ESM' - require() 加载 ES Module 失败

Vite 配置报错：'ERR_REQUIRE_ESM' - require() 加载 ES Module 失败

报错信息显示是因为在 vite.config.js 中使用了 ES Module，而不支持使用 require() 来加载 ES Module。解决方法是将 vite-plugin-alias 的引入方式改为动态 import() 的方式。

修改后的代码示例：

import { fileURLToPath, URL } from 'node:url'

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

// 使用动态 import 加载 vite-plugin-alias
const viteAlias = () => import('vite-plugin-alias')

// https://vitejs.dev/config/
export default defineConfig(async ({ command, mode }) => {
  const plugins = [
    vue(),
    // 使用动态 import 加载 vite-plugin-alias
    (await viteAlias()).default({
      // 将 Three.js 中的相对路径映射为绝对路径
      entries: [
        {
          find: /^three/examples/, 
          replacement: path.resolve(__dirname, 'node_modules/three/examples/js'),
        },
      ],
    }),
  ]
  return {
    plugins,
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./', import.meta.url))
      }
    }
  }
})

解释：

1. 动态 import()：使用 import() 语法动态加载 vite-plugin-alias 模块，可以避免使用 require() 导致的错误。
2. 异步函数：defineConfig 接受一个异步函数，所以需要使用 async/await 来处理动态加载模块的操作。
3. default 属性：由于 vite-plugin-alias 模块是通过 export default 导出的，所以需要使用 .default 属性来访问导出值。

注意事项：

• 确保你的 vite-plugin-alias 模块是最新版本。
• 如果仍然遇到问题，请检查你的项目依赖关系和 node 版本。
• 可以尝试使用 npm rebuild 命令重新构建项目依赖关系。