本文详细介绍了在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这个插件来解决,但是这个插件打包会报一些奇怪的错误,不是做好的解决方法。

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐