關(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)文章
Vue在echarts?tooltip中添加點(diǎn)擊事件案例詳解
本文主要介紹了Vue項(xiàng)目中在echarts?tooltip添加點(diǎn)擊事件的案例詳解,代碼具有一定的價(jià)值,感興趣的小伙伴可以來學(xué)習(xí)一下2021-11-11Vue中的ref作用詳解(實(shí)現(xiàn)DOM的聯(lián)動(dòng)操作)
這篇文章主要介紹了Vue中的ref作用詳解(實(shí)現(xiàn)DOM的聯(lián)動(dòng)操作),需要的朋友可以參考下2017-08-08Vue3利用自定義指令進(jìn)行內(nèi)容控制的實(shí)現(xiàn)方法
Vue3作為一個(gè)漸進(jìn)式JavaScript框架,提供了強(qiáng)大的自定義指令功能,使得權(quán)限控制變得既簡單又高效,本文將詳細(xì)介紹如何在Vue3中使用自定義指令來判斷內(nèi)容是否顯示,以滿足不同用戶權(quán)限下的界面展示需求,需要的朋友可以參考下2024-04-04iview-table組件嵌套input?select數(shù)據(jù)無法雙向綁定解決
這篇文章主要為大家介紹了iview-table組件嵌套input?select數(shù)據(jù)無法雙向綁定解決示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue3?組件與API直接使用的方法詳解(無需import)
這篇文章主要介紹了vue3?組件與API直接使用的方法(無需import),主要包括vue3自動(dòng)導(dǎo)入和API的自動(dòng)引入問題,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09Vue自定義指令實(shí)現(xiàn)對(duì)數(shù)字進(jìn)行千分位分隔
對(duì)數(shù)字進(jìn)行千分位分隔后展示應(yīng)該是大部分同學(xué)都做過的功能了吧,常規(guī)的做法通常是編寫一個(gè)工具函數(shù)來對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換,那么我們可不可以通過vue指令來實(shí)現(xiàn)這一功能呢,下面我們就來探索一下呢2024-02-02antd-DatePicker組件獲取時(shí)間值,及相關(guān)設(shè)置方式
這篇文章主要介紹了antd-DatePicker組件獲取時(shí)間值,及相關(guān)設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue實(shí)現(xiàn)內(nèi)容可滾動(dòng)的彈窗效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)內(nèi)容可滾動(dòng)的彈窗效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09