Vue+Symfony项目中Bootstrap Icons字体路径配置求助

问题说明 #

在基于Vue和Symfony的单页应用中，使用Twig作为主页面模板，Bootstrap Icons字体无法正常加载。原因是编译后的CSS中字体路径为绝对路径（以/开头），导致浏览器从网站根目录查找字体文件，而实际字体文件与CSS文件处于同一目录（public/admin/）。

当前编译后的CSS输出：

@font-face{
    font-display:block;
    font-family:bootstrap-icons;
    src:url(/bootstrap-icons.woff2) format("woff2"),url(/bootstrap-icons.woff) format("woff")
}

当前配置 #

Twig主页面文件 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="{{ asset('admin/favicon.ico') }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dev-Portal</title>
    <link rel="stylesheet" crossorigin href="{{ asset('/admin/main.css') }}">
    <script type="module" crossorigin src="{{ asset('/admin/main.js') }}"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Vite构建配置 #

build: {
    outDir: fileURLToPath(new URL('./../public/admin', import.meta.url)),
    target: 'esnext',
    manifest: true,
    emptyOutDir: true,
    minify: true,
    rollupOptions: {
        input: fileURLToPath(new URL('./src/main.ts', import.meta.url)),
        output: {
            entryFileNames: '[name].js',
            chunkFileNames: '[name]-[hash].js',
            assetFileNames: '[name].[ext]',
            globals: {
                vue: 'Vue'
            }
        }
    }
},

项目结构 #

• 根目录：Composer管理的Symfony项目
• admin/目录：npm管理的Vue项目，构建产物输出到Symfony的public/admin/目录

期望的路径格式 #

需要CSS生成的字体路径为相对路径，不带开头的/，两种有效格式：

@font-face{
    font-display:block;
    font-family:bootstrap-icons;
    src:url(bootstrap-icons.woff2) format("woff2"),url(bootstrap-icons.woff) format("woff")
}

或

@font-face{
    font-display:block;
    font-family:bootstrap-icons;
    src:url(./bootstrap-icons.woff2) format("woff2"),url(./bootstrap-icons.woff) format("woff")
}

解决方案 #

修改Vite配置文件，添加base: './'顶层配置项，强制Vite生成相对路径的资源引用：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath } from 'url';

export default defineConfig({
  // 新增：设置相对路径基础，确保资源引用路径为相对当前CSS文件的路径
  base: './',
  plugins: [vue()],
  build: {
    outDir: fileURLToPath(new URL('./../public/admin', import.meta.url)),
    target: 'esnext',
    manifest: true,
    emptyOutDir: true,
    minify: true,
    rollupOptions: {
        input: fileURLToPath(new URL('./src/main.ts', import.meta.url)),
        output: {
            entryFileNames: '[name].js',
            chunkFileNames: '[name]-[hash].js',
            assetFileNames: '[name].[ext]',
            globals: {
                vue: 'Vue'
            }
        }
    }
  }
});

验证步骤 #

1. 重新执行Vite构建命令（如npm run build）
2. 查看public/admin/main.css中的@font-face路径是否变为相对路径
3. 刷新页面，检查Bootstrap Icons是否正常显示

内容的提问来源于stack exchange，提问作者De Ga