React+Vite+Express部署时字体路径404及Vite警告问题

问题根源分析 #

• Dev环境警告原因：Vite的public目录在开发时会映射到服务器根路径（/），但你配置的$font-path: 'public/fonts/ibm'让CSS生成的字体路径多了一层public，Vite dev server虽能通过内部重定向让浏览器访问，但会触发路径警告。
• Build后404原因：执行npm run build时，Vite会把public下的文件直接复制到dist根目录（即public/fonts/ibm变为dist/fonts/ibm），但CSS里的路径仍为public/fonts/ibm，导致部署后浏览器请求错误路径，返回404。
• VSCode显示存在但终端看不到：你大概率查看的是项目根目录的public/fonts，而非dist目录下的对应路径，终端ls查询的是dist内容，所以看不到。

具体解决方案 #

1. 修正Carbon字体路径配置 #

在Sass入口文件（如src/index.scss）中，去掉public前缀——因为Vite在dev和build时都会把public下的资源映射到根路径：

$font-path: '/fonts/ibm';

如果需要区分环境，也可借助Vite注入的环境变量动态配置：

$font-path: '#{$VITE_PUBLIC_URL}/fonts/ibm';

2. 确认字体文件复制情况 #

确保字体文件放在项目根目录的public/fonts/ibm下，执行npm run build后，进入dist目录执行ls fonts/ibm，确认字体文件存在。若不存在，检查是否有构建脚本遗漏复制步骤，或手动确认文件是否存在。

3. 调整Vite配置（可选） #

如果字体未被正确打包到dist，在vite.config.js中添加assetsInclude确保字体文件被识别：

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

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.woff', '**/*.woff2', '**/*.ttf'] // 根据你的字体格式补充
});

4. Express部署的静态资源配置 #

确保Express服务器正确指向dist目录作为静态资源根：

const express = require('express');
const path = require('path');
const app = express();

// 静态资源指向dist目录
app.use(express.static(path.join(__dirname, 'dist')));

// 处理SPA路由（单页应用需添加）
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

验证步骤 #

1. 执行npm run dev，检查终端是否还有路径警告，确认浏览器字体加载正常。
2. 执行npm run build，进入dist目录用ls fonts/ibm确认字体文件存在。
3. 启动Express服务器，打开浏览器控制台，查看字体请求路径为/fonts/ibm/xxx且返回200。

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