Vue3 - vite 项目报错:Uncaught ReferenceError: require is not defined(解决 vue3 vite 项目无法识别 require 语法导致报错)
本文详细介绍了在Vue3项目使用Vite时遇到`require is not defined`错误的解决方法,包括直接修改代码、配置vite.config.js,适用于Vue2升级到Vue3以及Vite项目中遇到的类似问题。当然你也可以使用vite-plugin-require-transform这个插件来解决,但是这个插件打包会报一些奇怪的错误,不是做好的解决方法。这样你就可以在vue3+vit
·
本文详细介绍了在Vue3项目使用Vite时遇到`require is not defined`错误的解决方法,包括直接修改代码、配置vite.config.js,适用于Vue2升级到Vue3以及Vite项目中遇到的类似问题。
可以通过npm或者pnpm安装
npm i vite-plugin-require | yarn add vite-plugin-require|pnpm i vite-plugin-require
再在vite.config.js中做如下配置:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginRequire from "vite-plugin-require"; // 确保导入路径正确
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(),vitePluginRequire({
// 假设插件接受一个配置对象
fileRegex:/(.jsx?|.tsx?|.vue)$/ ,
translateType: 'import', // 将 require 转换为 import 语句
// 其他可能的选项...
})],
})
但是这样会报错,vitePluginRequire is not a function,可以采用下面的方法解决:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginRequire from "vite-plugin-require"; // 确保导入路径正确
// https://vite.dev/config/
export default defineConfig({
//@ts-ignore
plugins: [vue(),vitePluginRequire.default({
// 假设插件接受一个配置对象
fileRegex:/(.jsx?|.tsx?|.vue)$/ ,
translateType: 'import', // 将 require 转换为 import 语句
// 其他可能的选项...
})],
})
这样你就可以在vue3+vite项目中愉快的使用require了。
当然你也可以使用vite-plugin-require-transform这个插件来解决,但是这个插件打包会报一些奇怪的错误,不是做好的解决方法。
更多推荐



所有评论(0)