前言

Vite是一種輕量快速的前端構建工具，能夠顯著提升前端開發(fā)體驗，而且官方已經發(fā)布v4版本，相對比較穩(wěn)定。在把VueCli搭建的項目遷移到Vite的過程中遇到了個問題，下面分享一下問題及解決辦法。

一、遇到的問題

在script標簽里面引入的圖片資源沒生效，然后一看控制臺，報錯顯示 require is not defined …

二、解決辦法

1. 明確方向

經過查找Vite相關文檔，看到官方文檔靜態(tài)資源處理目錄，發(fā)現需要使用new URL()這個方法才能處理動態(tài)引入的URL，才能保證圖片資源在經過打包和資源哈希后仍指向正確的地址。

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/下，那么直接封裝成一個函數，像hooks那樣調用應該方便很多。

• 在utils文件下下新建useImgUrl.js文件，簡簡單單，只需要傳入圖片文件名及類型即可

const getImgUrl = file => {
  return new URL(`../assets/images/${file}`, import.meta.url).href;
};
export default getImgUrl;

• 在文件中引入并使用，文件內修改只需使用全局替換功能即可

import getImgUrl from "../utils/useImgUrl";
url: getImgUrl("banner@2x.png"),

③ 方案三

上面的方案雖然不用一個個改了，但是Vue3沒有mixins這樣可以全局引入的方法，還是需要在不同的文件去引入hook，這個時候我想能不能像webpack的loader那樣去全局處理.vue文件，這樣全局替換的操作交給構建工具去自動執(zhí)行得了，然后發(fā)現Vite里面并沒有loader配置，不過好在這時候一個Vite插件給了我靈感，可以用Vite插件API去實現類似的功能，于是轉換下思路，寫了這么一個插件

• 代碼：

// requireToUrlPlugin.js
export default function requirePlugin() {
  return {
    // 插件名稱
    name: "vite-plugin-vue-requireToUrlPlugin",

    // 默認值post：在 Vite 核心插件之后調用該插件，pre：在 Vite 核心插件之前調用該插件
    // enforce: "post",

    // 代碼轉譯，這個函數的功能類似于 "webpack" 的 "loader"
    transform(code, id, opt) {
      const vueRE = /\.vue$/;
      const require = /require/g;
      
      // 過濾掉非目標文件
      if (!vueRE.test(id) || !require.test(code)) return code;

      // 匹配 require() 內的內容
      const requireRegex = /require\((.*?)\)/g;

      // 將 require() 內的內容替換為 new URL 的寫法
      const finalCode = code.replace(requireRegex, "new URL($1,import.meta.url).href");
		
	  // 將轉換后的代碼返回
      return finalCode;
    },
  };
}

• 在Vite配置中引入此插件：

// vite.config.js
import requireToUrlPlugin from './src/requireToUrlPlugin';
export default defineConfig(({ command, mode }) => {
    plugins: [
      vue(),
      requireToUrlPlugin(),
    ]
});

引入后項目中的require方法都會被插件自動轉換為new URL() 的語法，真的是終極大招[doge]，這樣就不用再一個個文件去改了，非常省事，而且自己寫的插件也完全可以自由定制，寫法僅供參考。

通過查看控制臺能看到通過Vite的打包運行“preview”后，圖片是正常顯示的。

查看源代碼能看到原本寫的 require 方法已經變成了 new URL()的方法。

三、原因及相關原理

1. 為什么需要require方法

靜態(tài)資源就是直接存放在項目中的資源，這些資源不需要我們發(fā)送專門的請求進行獲取。比如assets目錄下面的圖片，視頻，音頻，字體文件，css樣式表等。
動態(tài)資源就是需要發(fā)送請求獲取到的資源

答：因為項目引入的動態(tài)資源被當做靜態(tài)資源處理了。被打包過后，被打包在新的文件夾下的圖片資源會生成新的文件名，在原來的文件名后會加入一串數字，此即為資源哈?；?，是為了做服務器緩存用的。那么靜態(tài)的路徑并不能匹配到新的文件名，導致無法正確的引入資源，所以需要加上require。require 是一個node方法，webpack會將圖片當成一個模塊，并根據配置文件中的規(guī)則進行打包，通過require方法拿到的文件地址，就是資源文件編譯過后的文件地址。

2. 為什么require方法失效了

答：因為原來的項目是VueCli搭建的，其是構建于 webpack 和 webpack-dev-server 之上的，所以require方法會經過webpack處理，而Vite開發(fā)環(huán)境是基于原生ES Module的，生產環(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，或者僅路徑（如果設置了 base）
  • base —— 可選的 base URL：如果設置了此參數，且參數 url 只有路徑，則會根據這個 base 生成 URL

  其中有一個屬性是href，正好是函數的返回值！

• import.metaimport.meta 對象包含關于當前模塊的信息。
  它的內容取決于其所在的環(huán)境。在瀏覽器環(huán)境中，它包含當前腳本的 URL，或者如果它是在 HTML 中的話，則包含當前頁面的 URL。

4. Vite插件介紹

Vite 插件擴展了設計出色的 Rollup 接口，帶有一些 Vite 獨有的配置項。因此，只需要編寫一個 Vite 插件，就可以同時為開發(fā)環(huán)境和生產環(huán)境工作。

擴展閱讀

• Vite 官方中文文檔 | 靜態(tài)資源處理
• Vite 官方中文文檔 | 插件 API
• Vue CLI | 處理靜態(tài)資源

總結

以上就是全部內容，本文簡單介紹了Vite在生產構建時JavaScript模塊對圖片資源的引入方法，并且介紹了Vite插件的基本用法。

到此這篇關于項目遷移vite引入圖片資源報require is not defined問題的解決辦法的文章就介紹到這了,更多相關vite報錯require is not defined內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論