快捷導(dǎo)航

Vue項(xiàng)目字體文件打包后fonts文件夾消失的原因分析與解決方案

更新時(shí)間：2026年06月02日 09:11:46 作者：Cheney9501

在 Vue 項(xiàng)目中,將字體文件放在 src/assets/fonts 目錄下,打包后在瀏覽器中訪問發(fā)現(xiàn)路徑里不見了 fonts文件夾,這通常不是文件丟失,而是 Vue 的構(gòu)建工具對(duì)靜態(tài)資源進(jìn)行了自動(dòng)化處理,本文給大家介紹了Vue項(xiàng)目字體文件打包后fonts文件夾消失的原因分析與解決方案

問題

在 Vue 項(xiàng)目中，將字體文件放在 src/assets/fonts 目錄下，打包后在瀏覽器中訪問發(fā)現(xiàn)路徑里“不見了 fonts”文件夾，這通常不是文件丟失，而是 Vue 的構(gòu)建工具（Webpack 或 Vite）對(duì)靜態(tài)資源進(jìn)行了自動(dòng)化處理。

導(dǎo)致這種情況主要有以下兩個(gè)原因：

原因一：小體積字體被轉(zhuǎn)成了 Base64（最常見）

Vue 的構(gòu)建工具默認(rèn)會(huì)對(duì) assets 目錄下的靜態(tài)資源進(jìn)行優(yōu)化。如果你的字體文件體積較?。ɡ缧∮?4KB 或 8KB，具體取決于配置），構(gòu)建工具會(huì)直接將其轉(zhuǎn)換成 Base64 編碼的字符串，并內(nèi)嵌到打包后的 CSS 文件中。

現(xiàn)象：瀏覽器訪問時(shí)，根本不會(huì)發(fā)起對(duì) .woff 或 .ttf 字體文件的網(wǎng)絡(luò)請(qǐng)求，因?yàn)樽煮w數(shù)據(jù)已經(jīng)包含在 CSS 里了。
結(jié)論：這是正常的優(yōu)化機(jī)制，能減少 HTTP 請(qǐng)求次數(shù)，提升加載速度，無(wú)需修復(fù)。

原因二：文件被重命名并提取到了根目錄

如果字體文件較大，構(gòu)建工具會(huì)將其作為獨(dú)立的資源文件打包。為了防止瀏覽器緩存導(dǎo)致更新不生效，構(gòu)建工具默認(rèn)會(huì)給文件名加上一串哈希值（如 MyFont.a1b2c3d4.woff）。同時(shí)，根據(jù)你的打包配置，這些資源可能會(huì)被直接提取到 dist 的根目錄或 static 目錄下，而不再保留原本的 fonts 文件夾結(jié)構(gòu)。

現(xiàn)象：在瀏覽器 Network 面板中看到的請(qǐng)求路徑可能是 /a1b2c3d4.woff，而不是 /fonts/MyFont.woff。
結(jié)論：只要瀏覽器能正常加載出字體（狀態(tài)碼 200），且頁(yè)面上字體顯示正常，就說明路徑解析是成功的。

如果你確實(shí)需要保留fonts目錄結(jié)構(gòu)

如果你希望打包后的路徑嚴(yán)格保持 /fonts/xxx.woff 的結(jié)構(gòu)，可以通過以下兩種方式解決：

方案 1：將字體文件移至 public 目錄（推薦）
public 目錄下的文件在打包時(shí)會(huì)原封不動(dòng)地復(fù)制到 dist 目錄，不會(huì)經(jīng)過構(gòu)建工具的處理（不會(huì)被轉(zhuǎn) Base64 或重命名）。

在根目錄的 public 文件夾下新建一個(gè) fonts 文件夾，將字體文件放進(jìn)去。
在 CSS 中使用絕對(duì)路徑引用：

@font-face {
  font-family: 'MyFont';
  /* 這里的 /fonts/ 對(duì)應(yīng) public/fonts/ */
  src: url('/fonts/MyFont.woff2') format('woff2');
}

方案 2：修改構(gòu)建配置（針對(duì) Webpack/Vue CLI）
如果你堅(jiān)持使用 src/assets，可以在 vue.config.js 中修改 url-loader 或 file-loader 的配置，強(qiáng)制指定輸出目錄并關(guān)閉 Base64 轉(zhuǎn)換（將 limit 設(shè)為 0）：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const fontsRule = config.module.rule('fonts');
    fontsRule.uses.clear(); // 清除默認(rèn)配置
    fontsRule
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 0, // 關(guān)閉 Base64 轉(zhuǎn)換
        name: 'fonts/[name].[hash:8].[ext]' // 強(qiáng)制輸出到 fonts 目錄下
      });
  }
};

建議：
你可以先打開瀏覽器的開發(fā)者工具（F12），切換到 Network（網(wǎng)絡(luò)） 面板，刷新頁(yè)面查看字體文件是否返回了 200 狀態(tài)碼。如果字體能正常顯示且沒有報(bào) 404 錯(cuò)誤，建議保持現(xiàn)狀即可，這屬于構(gòu)建工具的正常優(yōu)化行為。

以上就是Vue項(xiàng)目字體文件打包后fonts文件夾消失的原因分析與解決方案的詳細(xì)內(nèi)容，更多關(guān)于Vue字體文件打包后fonts文件夾消失的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: