Vue3重构Vue2项目，如何模块化加载文件？

Question

问题遇到的现象和发生背景

当Vue3重构Vue2项目时出现一个问题便是打包编译运用不同的插件，Vue2是用Webpack打包编译的，而Vue3尝试用Vite打包编译。

问题相关代码，请勿粘贴截图

const modulesFiles = require.context('./modules', true, /.js$/)

// you do not need import app from './modules/app'
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^./(.*).\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})

运行结果及报错内容

Vue3运行编译后报错：Uncaught ReferenceError: require is not defined

我的解答思路和尝试过的方法

我想要达到的结果