胖蔡说技术
随便扯扯

使用vite-plugin-require-transform解决Vue3中require报错的问题

问题

Vue3开发过程中的三方库存在使用require方式进行包的引入,这时候项目运行过程中出现报错问题:

当前使用Vite做为开发构建工具,而Vite默认不支持使用require方式进行模块导入导出。

解决方法

可通过vite-plugin-require-transform插件解决该问题。

安装插件

$ pnpm i vite-plugin-require-transform -D #或
$ npm i vite-plugin-require-transform --save-dev

应用插件

安装好插件后需要在vite中添加使用,代码如下:

// vite.config.ts

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import requireTransform from 'vite-plugin-require-transform';

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    requireTransform({ fileRegex: /.ts$|.vue$|.png$|.tsx$|.jpg$/ }),
  ],
});
赞(0) 打赏
转载请附上原文出处链接:胖蔡说技术 » 使用vite-plugin-require-transform解决Vue3中require报错的问题
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏