Asp.NET Core 6集成Vue3时无法加载Vite构建的字体文件求助

排查与修复步骤 #

1. 检查静态文件中间件的MIME类型配置 #

Asp.Net Core默认可能未注册.woff2的MIME类型，导致服务器无法正确识别并返回字体文件。在Program.cs中补充配置：

var builder = WebApplication.CreateBuilder(args);

// 配置静态文件的MIME类型
builder.Services.Configure<StaticFileOptions>(options =>
{
    var contentTypeProvider = (FileExtensionContentTypeProvider)options.ContentTypeProvider;
    if (!contentTypeProvider.Mappings.ContainsKey(".woff2"))
    {
        contentTypeProvider.Mappings.Add(".woff2", "font/woff2");
    }
});

var app = builder.Build();

// 确保静态文件中间件在管道最前端
app.UseStaticFiles();

// 其他路由、授权等中间件配置...
app.Run();

2. 验证Vite构建的资源路径配置 #

检查Vue项目的vite.config.js，确保构建输出路径和资源基准路径与Asp.Net Core的wwwroot目录匹配：

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

export default defineConfig({
  plugins: [vue()],
  base: '/dist/', // 对应Asp.Net Core中静态文件的访问根路径
  build: {
    outDir: '../wwwroot/dist', // 确保构建产物输出到正确目录
    assetsDir: 'assets' // 保持与当前生成的assets子目录一致
  }
})

若base配置错误，CSS中引用字体的相对路径会失效，导致浏览器请求错误的URL。

3. 检查构建后CSS中的字体引用路径 #

打开生成的main-*.css文件，确认Font Awesome的字体引用路径是正确的相对路径：

@font-face {
  font-family: "Font Awesome 6 Free";
  src: url("./fa-regular-400-8e7e5ea1.woff2") format("woff2");
  /* 其他字体属性 */
}

如果路径是绝对路径或错误层级，需要调整Vite配置确保资源引用路径正确。

4. 确认中间件执行顺序 #

确保UseStaticFiles()在路由和端点配置之前执行，避免静态文件请求被路由规则拦截：

app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

5. 验证文件存在性与权限 #

• 确认wwwroot/dist/assets目录下确实存在目标.woff2文件
• 检查文件权限，确保Asp.Net Core应用程序池拥有该文件的读取权限
• 打开浏览器开发者工具的Network标签，查看字体文件的请求状态：若返回404，核对请求URL与实际文件路径是否一致

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