## 方法1
要在Vite中使用`require`函数，你需要添加`Vite`插件[`vite-plugin-vue2`]来支持 Vue 2 单文件组件解析和转换。
以下是在 Vite 中配置并使用`vite-plugin-vue2`的步骤：
1. 在你的项目根目录执行以下命令安装`vite-plugin-vue2`：
~~~
npm install vite-plugin-vue2
~~~
2. 在`vite.config.js`中添加以下配置：
~~~
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vue2 from 'vite-plugin-vue2'
export default defineConfig({
plugins: [
vue(),
vue2()
]
})
~~~
3. 确保项目中已经安装了`vue`和`vue-template-compiler`：
~~~
npm install vue vue-template-compiler
~~~
4. 在你的组件文件中，使用`require`函数：
~~~
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
mounted() {
this.message = require('./data.json')
}
}
</script>
~~~
在这个例子中，`data.json`是一个位于当前组件目录下的JSON文件。你可以根据你的实际需求修改路径和文件名。
现在，运行`vite`命令来启动你的项目。Vite现在应该正确解析和加载`require`函数。
## 方法2
由于 Vite 使用 ES 模块作为默认的模块系统，并没有内置对 CommonJS 的支持，所以如果我们希望在 Vite 构建的项目中使用 require 则需要通过一些特定的插件
### 解决方案
#### 1、安装依赖
~~~js
// 1. 通过 yarn 安装
yarn add -D vite-plugin-require-transform
or
// 2. 通过 npm 安装
npm i vite-plugin-require-transform --save-dev
~~~
#### 2、在 vite.config.js 中进行配置
~~~js
import { defineConfig } from 'vite'
import requireTransform from 'vite-plugin-require-transform' // 1. 引入插件
export default defineConfig({
plugins: [
// 2. 添加以下代码
requireTransform({
fileRegex: /.js$|.vue$/,
}),
],
})
~~~
#### 3、 重启项目
按照以上方法即可解决 Vite 中不能使用 require 的问题
