关于Vite不能使用require问题的解决方法
作者：会说法语的猪
咱们在vue2中是不存在require is not defined问题的，那是因为webpack帮我们解决了，开发时在内部对其了转换
为什么非要使用require语法？因为require语法有时候确实蛮好用的啊，咱们在vue2中可以通过require语法，定义变量，动态获取一些静态资源
vite却不能使用，确实有点点的难受，最近刚发现了一种开发时依赖插件vite-plugin-require-transform，那就试一下吧
vitejs/ awesome-vite - github地址： https://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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！