使用 Express 提供 React + Vite 应用程序时，公共目录中的文件在根路径错误处提供服务

Question

我使用 React + Vite 构建了一个应用程序。

UI 使用 IBM 的 Carbon 设计系统。我用 Sass 构建了 CSS，它有

// src/assets/styles.scss
@use '@carbon/react' with (
    $font-path: 'public/fonts/ibm'
); 

编译为

sass src/assets/styles.scss src/styles.css --load-path=node_modules

这会在

src/styles.css

生成一个静态 CSS 文件。该文件包含对 Carbon 提供的字体的引用，所有这些字体都有一个路径

public/fonts/ibm/*

，这就是 Sass 文件中指定为

$font-path

的路径。

我必须使用

cp -r node_modules/@ibm/plex/IBM-Plex-* public/fonts/ibm

复制字体

当我使用

npm run dev

运行应用程序时，我在终端中收到以下警告

公共目录中的文件在根路径中提供。 使用 /fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light，而不是 /public/fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2 -拉丁语1.woff2

对于多个不同的字体文件，此消息会重复多次。

但是，应用程序可以在浏览器中正确加载。我收到所有字体的 200 响应，并且可以从包含“公共”的路径访问它们，例如

http://localhost:5173/public/fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2

然后我需要构建应用程序以部署到 Google Cloud。我按照 https://www.youtube.com/watch?v=NMnKGHgw8aM 上的教程做到了这一点。教程说要使用

npm run build

。这确实会创建包含相关文件的

dist/*

文件夹，但是对于不同的字体文件，以下警告会多次出现，例如

public/fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2 在 public/fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light- 中引用Latin1.woff2 在构建时未解析，它将保持不变以在运行时解析

文件是在dist/

目录中创建的，如VSCode所示：

奇怪的是，如果我列出

dist/

 目录中的文件/文件夹（包括隐藏的），它们

不会出现在终端中：

% pwd 
/Users/andy/Documents/VSCode/react/dist/assets
andy@macbook assets % ls -lah 
total 1824
drwxr-xr-x  4 andy  staff   128B Nov  7 10:00 .
drwxr-xr-x  6 andy  staff   192B Nov  7 10:00 ..
-rw-r--r--  1 andy  staff   693K Nov  7 10:00 index-524dIBfm.css
-rw-r--r--  1 andy  staff   214K Nov  7 10:00 index-C6J8y3S0.js

本教程通过上一级

cd ..

 启动 Express 服务器，然后执行 

npm install express

，然后将其添加为 

index.js

const express = require('express');
const app = express();
app.use(express.json());
app.use(express.static('react/dist'));
const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`Listening on port ${port}`);
})

行

app.use(express.static('react/dist'));

旨在将构建的React应用程序作为静态文件提供服务。

运行时

npm run start

 Express 服务器确实启动，并且应用程序在浏览器中加载 http://localhost:8080/

但是所有字体都会出现 404 错误。这些错误出现在许多不同字体文件的控制台中

index-524dIBfm.css:1 GET http://localhost:8080/assets/public/fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2 net::ERR_ABORTED 404 (未找到）

我很困惑这个错误的真正根源是什么。考虑到文件显示在 VSCode 的文件浏览器中但不显示

ls -lah

 的奇怪行为。或者，这是否是 Vite 配置所特有的。作为参考，Vite 配置仅包含默认创建的内容，即

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
})

Answer 1

在反应中，

public

文件夹中的所有文件都将在根目录中提供，如您的错误所示。

因此，您必须从路径中删除 public，而不是使用

/public/fonts/ibm

，而是使用 

/fonts/ibm

 并将其应用于您在其中添加 

public

 的所有路径。