問題

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

導致這種情況主要有以下兩個原因：

原因一：小體積字體被轉成了 Base64（最常見）

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

• 現象：瀏覽器訪問時，根本不會發(fā)起對 .woff 或 .ttf 字體文件的網絡請求，因為字體數據已經包含在 CSS 里了。
• 結論：這是正常的優(yōu)化機制，能減少 HTTP 請求次數，提升加載速度，無需修復。

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

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

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

如果你確實需要保留fonts目錄結構

如果你希望打包后的路徑嚴格保持 /fonts/xxx.woff 的結構，可以通過以下兩種方式解決：

方案 1：將字體文件移至 public 目錄（推薦）
public 目錄下的文件在打包時會原封不動地復制到 dist 目錄，不會經過構建工具的處理（不會被轉 Base64 或重命名）。

1. 在根目錄的 public 文件夾下新建一個 fonts 文件夾，將字體文件放進去。
2. 在 CSS 中使用絕對路徑引用：

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

方案 2：修改構建配置（針對 Webpack/Vue CLI）
如果你堅持使用 src/assets，可以在 vue.config.js 中修改 url-loader 或 file-loader 的配置，強制指定輸出目錄并關閉 Base64 轉換（將 limit 設為 0）：

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

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

以上就是Vue項目字體文件打包后fonts文件夾消失的原因分析與解決方案的詳細內容，更多關于Vue字體文件打包后fonts文件夾消失的資料請關注腳本之家其它相關文章！

最新評論