## 方法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 的問題
