解决Vite+vue3使用第三方依赖报错“require is not defined”问题

在Vite + Vue3项目中遇到“require is not defined”的错误通常是因为你在尝试使用CommonJS模块导出导入机制，而Vite 默认采用的是ES module（ESM）。这在Vue组件内直接使用`import`和`export`语法是可以避免这个问题的。如果你需要引入第三方库，有几种解决方法：

1. **使用vite-plugin-commonjs**：这是一个Vite 插件，它允许你在项目中混合使用CommonJS和ESM。安装并配置这个插件后，你可以像下面这样导入第三方库：

   npm install vite-plugin-commonjs -D

在`vite.config.js`中添加：

   import commonjs from 'vite-plugin-commonjs'
   
   export default defineConfig({
     plugins: [
       commonjs(),
     ],
   })

2. **将第三方库转换为ESM**：如果可能，尽量将第三方库转换为其ESM版本。很多库现在都支持这种转换，例如 `npm run build -- @某库名` 或者检查其是否有umd版本。

3. **全局引入**：对于一些全局作用域的库，可以在项目的根目录下创建一个`.esm`文件（如`global-utils.esm.js`），然后导入并导出：

   // global-utils.esm.js
   export { default as myLib } from 'my-third-party-lib';

然后在其他组件中使用`import * as myLib from '@/global-utils'`。

4. **条件加载**：如果有必要，可以使用`@vitejs/plugin-vue-router`的`defineAsyncComponent`来动态导入和延迟加载第三方库，以减少初始加载时的问题。

记得每次更改后都要重启Vite服务查看是否解决了问题。