Vite项目npm run build后字体与背景图片无法显示问题咨询

算力阿峰

2026-7-14

Vite打包后预览时SCSS资源路径失效的解决方案

问题根源

你手动编写的多级回退路径（../../../）在Vite打包阶段未被正确解析——Vite生产构建时会将资源统一输出到dist/assets目录，这类跨目录的相对路径会导致资源引用指向错误位置，最终背景图、自定义字体无法加载。

解决方法

方法一：配置路径别名（推荐）

通过Vite路径别名简化资源引用，彻底避免层级混乱：

修改vite.config.js，添加resolve.alias配置：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
    build: {
        minify: false
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    }
});

更新SCSS中的资源路径，用@指代src目录：

@font-face {
    font-family: "CustomFont";
    src: url("@/assets/fonts/Marcheile-Bold-Condensed.woff") format("woff"),
         url("@/assets/fonts/Marcheile-Bold-Condensed.otf") format("opentype"),
         url("@/assets/fonts/Marcheile-Bold-Condensed.woff2") format("woff2");
}

方法二：修正相对路径

根据SCSS文件的实际位置，编写正确的相对路径：
假设你的SCSS文件位于src/styles/xxx.scss，字体文件在src/assets/fonts/，那么相对路径应该是../assets/fonts/xxx（而非../../../）：

@font-face {
    font-family: "CustomFont";
    src: url("../assets/fonts/Marcheile-Bold-Condensed.woff") format("woff"),
         url("../assets/fonts/Marcheile-Bold-Condensed.otf") format("opentype"),
         url("../assets/fonts/Marcheile-Bold-Condensed.woff2") format("woff2");
}