欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論