vite项目require语法兼容问题解决require is not defined

vite项目不支持require语法问题解决 require is not defined

Vite默认使用es6标准的 import 的导入方式，不支持require引入。默认有Vite自己的引入方式https://vitejs.cn/guide/assets.html

但在在日常使用Vue3+Ts+Vite构建项目中,部分比较旧的三方插件中默认使用的是require引入(webpack构建可以使用),会出现require方法报错的兼容性问题 require is not defined 。

1. require和import导入区别

2. 解决方法

Vite 仓库社区生态 https://github.com/vitejs/awesome-vite中有一个

插件 vite-plugin-require-transform。 插件自动转换import xxx from ‘’;方法 引入

安装

yarn add -D vite-plugin-require-transform
1

或者

npm i vite-plugin-require-transform --save-dev
1

使用

// vite.config.ts配置

import requireTransform from 'vite-plugin-require-transform';

  plugins: [
    // ...
    requireTransform({
      fileRegex:/.ts$|.tsx$|.vue$/
	//   fileRegex:/.js$|.jsx$|.vue$/
    }),
  ]
1
2
3
4
5
6
7
8
9
10
11

添加之后npm run build打包 npm run preview 预览无异常。