526互联

vite 打包正式环境报错 require is not defined

发布时间 2023-12-15 14:45:13作者: Pepsi_Cola

本质原因是因为浏览器不识别commonJS的语法，需要通过插件做转换

解决方法:
方法1:项目代码中使用了require语法，使用这个插件便可以转换 npm i vite-plugin-commonjs -S

//  vite.config.js
import requireTransform from 'vite-plugin-require-transform'
export default defineConfig({
  plugins: [
    requireTransform({
      fileRegex: /.js$|.vue$/
    })
  ],
  //.....
 })

方法2: 本身项目没有使用require语法或者使用过方法1，那就是第三方包内部用了require语法
npm i vite-plugin-commonjs -S

//  vite.config.js
import commonjs from 'vite-plugin-commonjs';
export default defineConfig({
  plugins: [ commonjs()],
  build: {
	  commonjsOptions: {
	    transformMixedEsModules: true
	  }
  }
})