快捷導(dǎo)航

關(guān)于Vite不能使用require問題的解決方法

更新時(shí)間：2022年10月20日 11:08:00 作者：會(huì)說法語的豬

在vue2中我們通常會(huì)在模板中通過三目運(yùn)算符和require來實(shí)現(xiàn)動(dòng)態(tài)圖片,下面這篇文章主要給大家介紹了關(guān)于Vite不能使用require問題的解決方法,需要的朋友可以參考下

咱們?cè)趘ue2中是不存在require is not defined問題的，那是因?yàn)閣ebpack幫我們解決了，開發(fā)時(shí)在內(nèi)部對(duì)其了轉(zhuǎn)換

為什么非要使用require語法？因?yàn)閞equire語法有時(shí)候確實(shí)蠻好用的啊，咱們?cè)趘ue2中可以通過require語法，定義變量，動(dòng)態(tài)獲取一些靜態(tài)資源

vite卻不能使用，確實(shí)有點(diǎn)點(diǎn)的難受，最近剛發(fā)現(xiàn)了一種開發(fā)時(shí)依賴插件vite-plugin-require-transform，那就試一下吧

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

進(jìn)去之后咱們搜索 require，然后選擇第三個(gè)

帶你進(jìn)去之后即 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="">

這樣是可以的，也不會(huì)報(bào)錯(cuò)了，正常使用require

第二：

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

這種就不行！報(bào)錯(cuò)，和第一種的區(qū)別就是把普通字符串改成了模板字符串（``）反引號(hào)，這種是不行的，有點(diǎn)坑

第三：

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

這種也不行！報(bào)錯(cuò)！

又是一個(gè)坑

第四：

<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>

這樣竟然可以！完全不報(bào)錯(cuò)！

第五（使用變量）：

<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>

剛才使用``模板字符串的都不行，變量更不用寫了，這次換個(gè)寫法，同樣也是不行

唉，有點(diǎn)失望，，，，真不知道出這個(gè)插件的意義在哪，這也不實(shí)用啊，跟webpack那個(gè)require差的有點(diǎn)兒遠(yuǎn)啊，這個(gè)插件就是將代碼從 require 語法轉(zhuǎn)換為 import ，但是我發(fā)現(xiàn)還不如import好用的，倒不如直接使用import了，都知道存在即合理，哈哈哈哈，就僅僅只為了解決require is not defined而出現(xiàn)嗎

還是我太菜了嗎。。。但是使用vue-cli3 + vue2的時(shí)候確實(shí)不存在上面的問題

總結(jié)

到此這篇關(guān)于Vite不能使用require問題的文章就介紹到這了,更多相關(guān)Vite不能使用require內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: