前言
Vite是一種輕量快速的前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗，而且官方已經(jīng)發(fā)布v4版本，相對比較穩(wěn)定。在把VueCli搭建的項目遷移到Vite的過程中遇到了個問題，下面分享一下問題及解決辦法。
一、遇到的問題
在script標簽里面引入的圖片資源沒生效，然后一看控制臺，報錯顯示 require is not defined …
二、解決辦法
1. 明確方向
經(jīng)過查找Vite相關(guān)文檔，看到官方文檔靜態(tài)資源處理目錄，發(fā)現(xiàn)需要使用new URL()這個方法才能處理動態(tài)引入的URL，才能保證圖片資源在經(jīng)過打包和資源哈希后仍指向正確的地址。
2. 解決方法
① 方案一
既然如此，那么直接改為new URL() 的寫法。
原本寫法是：
url: require("../assets/images/banner@2x.png"),
- 那么使用
new URL()的寫法：
url: new URL(`../assets/images/banner@2x.png`, import.meta.url).href;
- 或者是
import的寫法 :
import banner from "../assets/images/banner@2x.png";
url: banner,
② 方案二
由于上面的方法都要一個個修改過于麻煩了，而且項目圖片都位于src/assets/images/下，那么直接封裝成一個函數(shù)，像hooks那樣調(diào)用應(yīng)該方便很多。
- 在utils文件下下新建useImgUrl.js文件，簡簡單單，只需要傳入圖片文件名及類型即可
const getImgUrl = file => {
return new URL(`../assets/images/${file}`, import.meta.url).href;
};
export default getImgUrl;
- 在文件中引入并使用，文件內(nèi)修改只需使用全局替換功能即可
import getImgUrl from "../utils/useImgUrl";
url: getImgUrl("banner@2x.png"),
③ 方案三
上面的方案雖然不用一個個改了，但是Vue3沒有mixins這樣可以全局引入的方法，還是需要在不同的文件去引入hook，這個時候我想能不能像webpack的loader那樣去全局處理.vue文件，這樣全局替換的操作交給構(gòu)建工具去自動執(zhí)行得了，然后發(fā)現(xiàn)Vite里面并沒有loader配置，不過好在這時候一個Vite插件給了我靈感，可以用Vite插件API去實現(xiàn)類似的功能，于是轉(zhuǎn)換下思路，寫了這么一個插件
- 代碼：
// requireToUrlPlugin.js
export default function requirePlugin() {
return {
// 插件名稱
name: "vite-plugin-vue-requireToUrlPlugin",
// 默認值post：在 Vite 核心插件之后調(diào)用該插件，pre：在 Vite 核心插件之前調(diào)用該插件
// enforce: "post",
// 代碼轉(zhuǎn)譯，這個函數(shù)的功能類似于 "webpack" 的 "loader"
transform(code, id, opt) {
const vueRE = /\.vue$/;
const require = /require/g;
// 過濾掉非目標文件
if (!vueRE.test(id) || !require.test(code)) return code;
// 匹配 require() 內(nèi)的內(nèi)容
const requireRegex = /require\((.*?)\)/g;
// 將 require() 內(nèi)的內(nèi)容替換為 new URL 的寫法
const finalCode = code.replace(requireRegex, "new URL($1,import.meta.url).href");
// 將轉(zhuǎn)換后的代碼返回
return finalCode;
},
};
}
- 在Vite配置中引入此插件：
// vite.config.js
import requireToUrlPlugin from './src/requireToUrlPlugin';
export default defineConfig(({ command, mode }) => {
plugins: [
vue(),
requireToUrlPlugin(),
]
});
引入后項目中的require方法都會被插件自動轉(zhuǎn)換為new URL() 的語法，真的是終極大招[doge]，這樣就不用再一個個文件去改了，非常省事，而且自己寫的插件也完全可以自由定制，寫法僅供參考。
通過查看控制臺能看到通過Vite的打包運行“preview”后，圖片是正常顯示的。
查看源代碼能看到原本寫的 require 方法已經(jīng)變成了 new URL()的方法。
三、原因及相關(guān)原理
1. 為什么需要require方法
靜態(tài)資源就是直接存放在項目中的資源，這些資源不需要我們發(fā)送專門的請求進行獲取。比如assets目錄下面的圖片，視頻，音頻，字體文件，css樣式表等。
動態(tài)資源就是需要發(fā)送請求獲取到的資源
答：因為項目引入的動態(tài)資源被當做靜態(tài)資源處理了。被打包過后，被打包在新的文件夾下的圖片資源會生成新的文件名，在原來的文件名后會加入一串數(shù)字，此即為資源哈希化，是為了做服務(wù)器緩存用的。那么靜態(tài)的路徑并不能匹配到新的文件名，導(dǎo)致無法正確的引入資源，所以需要加上require。require 是一個node方法，webpack會將圖片當成一個模塊，并根據(jù)配置文件中的規(guī)則進行打包，通過require方法拿到的文件地址，就是資源文件編譯過后的文件地址。
2. 為什么require方法失效了
答：因為原來的項目是VueCli搭建的，其是構(gòu)建于 webpack 和 webpack-dev-server 之上的，所以require方法會經(jīng)過webpack處理，而Vite開發(fā)環(huán)境是基于原生ES Module的，生產(chǎn)環(huán)境則是通過Rollup進行打包的，Rollup默認也是不支持CommonJS模塊的，所以無法識別 require 方法。
3. new URL() 為什么就可以
const imgUrl = new URL('./img.png', import.meta.url).href
-
new URL(url,base)
用來創(chuàng)建一個新 URL 對象：- url —— 完整的 URL，或者僅路徑（如果設(shè)置了 base）
- base —— 可選的 base URL：如果設(shè)置了此參數(shù)，且參數(shù) url 只有路徑，則會根據(jù)這個 base 生成 URL
其中有一個屬性是href，正好是函數(shù)的返回值！
-
import.meta
import.meta 對象包含關(guān)于當前模塊的信息。
它的內(nèi)容取決于其所在的環(huán)境。在瀏覽器環(huán)境中，它包含當前腳本的 URL，或者如果它是在 HTML 中的話，則包含當前頁面的 URL。
4. Vite插件介紹
Vite 插件擴展了設(shè)計出色的 Rollup 接口，帶有一些 Vite 獨有的配置項。因此，只需要編寫一個 Vite 插件，就可以同時為開發(fā)環(huán)境和生產(chǎn)環(huán)境工作。
總結(jié)
以上就是全部內(nèi)容，本文簡單介紹了Vite在生產(chǎn)構(gòu)建時JavaScript模塊對圖片資源的引入方法，并且介紹了Vite插件的基本用法。文章來源：http://www.zghlxwxcb.cn/news/detail-776987.html
如果此篇文章對您有幫助歡迎您【點贊】，也歡迎您【評論】+【收藏】！文章來源地址http://www.zghlxwxcb.cn/news/detail-776987.html
擴展閱讀
- Vite 官方中文文檔 | 靜態(tài)資源處理
- Vite 官方中文文檔 | 插件 API
- Vue CLI | 處理靜態(tài)資源
到了這里，關(guān)于解決項目遷移vite引入圖片資源報require is not defined的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
