如何解决Vite项目中无法使用require的问题？

本文共计803个文字，预计阅读时间需要4分钟。

在Vue2中，require is not defined的问题通常是因为使用了require语法，但在非CommonJS环境中，如Webpack构建的项目中，require不会自动定义。这是因为Webpack默认使用ES6模块系统，其中模块导入是通过`import`和`export`来实现的。

以下是对原内容的简化：

Vue2中遇到require is not defined问题，通常是因为Webpack项目使用了ES6模块导入而非require。require在某些情况下可能更好用，但Vue2中我们通常使用`import`和`export`来处理模块导入导出。

咱们在vue2中是不存在require is not defined问题的，那是因为webpack帮我们解决了，开发时在内部对其了转换

为什么非要使用require语法？因为require语法有时候确实蛮好用的啊，咱们在vue2中可以通过require语法，定义变量，动态获取一些静态资源

vite却不能使用，确实有点点的难受，最近刚发现了一种开发时依赖插件vite-plugin-require-transform，那就试一下吧

vitejs/ awesome-vite - github地址：github.com/vitejs/awesome-vite

进去之后咱们搜索 require，然后选择第三个

带你进去之后即vit-plugin-require-transform

然后安装

yarn add -D vite-plugin-require-transform or npm i vite-plugin-require-transform --save-dev

然后vite.config.js中配置

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

这样就可以了

然后就去抓紧抓紧试一下

第一：

<img class="img" :src="require('@/assets/login/login-bg.jpg')" alt="">

这样是可以的，也不会报错了，正常使用require

第二：

<img class="img" :src="require(`@/assets/login/login-bg.jpg`)" alt="">

这种就不行！报错，和第一种的区别就是把普通字符串改成了模板字符串（``）反引号，这种是不行的，有点坑

第三：

<template> <div class="img"> <img class="img" :src="img1" alt=""> </div> </template> <script setup> const img1 = require('@/assets/login/login-bg.jpg') </script>

这种也不行 ！报错！

又是一个坑

第四：

<template> <div class="img"> <img class="img" :src="img2" alt=""> </div> </template> <script setup> const img1 = require('@/assets/login/login-bg.jpg') let img2 = img1 </script> <style scoped> .img { width: 100%; height: 100%; } </style>

这样竟然可以！完全不报错！

第五（使用变量）：

<template> <div class="img"> <img class="img" :src="img2" alt=""> </div> </template> <script setup> let a = 'login' const img1 = require('@/assets/' + a +'/login-bg.jpg') let img2 = img1 </script> <style scoped> .img { width: 100%; height: 100%; } </style>

刚才使用``模板字符串的都不行，变量更不用写了，这次换个写法，同样也是不行

唉，有点失望，，，，真不知道出这个插件的意义在哪，这也不实用啊，跟webpack那个require差的有点儿远啊，这个插件就是将代码从 require 语法转换为 import，但是我发现还不如import好用的，倒不如直接使用import了，都知道存在即合理，哈哈哈哈，就仅仅只为了解决require is not defined而出现吗

还是我太菜了吗。。。但是使用vue-cli3 + vue2的时候确实不存在上面的问题

总结

到此这篇关于Vite不能使用require问题的文章就介绍到这了,更多相关Vite不能使用require内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！