vue3+vite不能使用require引入包的问题

Vue3 和 Vite 是现代前端开发中的两个热门技术栈。Vite 是一个高性能的前端构建工具，它采用了更轻量级的预加载策略，而 Vue3 则是 Vue 框架的最新版本，强调了组件化和 TypeScript 的支持。

当你尝试使用 `require` 或者 `import * as` 来引入外部模块时，在 Vue3 + Vite 的组合下可能会遇到一些问题。这是因为 Vite 默认配置是基于 ES 模块（`.mjs` 文件），而不是 CommonJS（`.js` 文件）。CommonJS 的 `require` 功能在 Vite 中需要额外配置才能工作。

解决这个问题通常需要做以下几步：

1. **安装 vite-plugin-commonjs**：这是用于启用 CommonJS 支持的插件，可以使用 npm 或 yarn 安装：

   npm install --save-dev vite-plugin-commonjs

2. **在 vite.config.js 中添加插件配置**：

   import { defineConfig } from 'vite';
   import commonjs from 'vite-plugin-commonjs';

   export default defineConfig({
     plugins: [
       commonjs(),
     ],
   });

3. 使用 `import` 替换 `require`：
而不是 `require('package')`，你应该使用 `import package from './path/to/package'`。

4. 如果是在.vue 文件中使用，可以在文件顶部使用 `import.meta.glob` 或者 `<script setup>` 特性来动态导入，因为 Vue 组件默认只支持 ES 模块。

注意，虽然上述步骤能解决大部分 `require` 的问题，但在某些大型项目中，完全迁移至 ES6 模块可能是更好的解决方案。