更新

Question

因此，我遵循了creat-react-app-docu中的文档，但我不知道如何通过express服务我的react-frontend。在文档中说明如下：

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

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

但是我的项目结构如下：

--root
      |
      backend
             |
             src
                |
                index.ts (My express config)
      |
      web
         |
         build (Production build of my react app)

所以我必须像这样修改我的 index.ts 中的配置：

// Present Frontend view
app.use(express.static(path.join(__dirname, '../../web')));

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, '../../web/build', 'index.html'));
});
// Start the server
server.listen(3000, () => console.log('BYOD is listening on port 3000!'));

但是我得到的错误是：拒绝应用'http://192.168.145.135:3000/BYOD/static/css/main.74ea495e.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.中的样式。

我的问题现在是：我在概念上做错了吗？我该如何解决这个问题？

更新

所以我发现index.html（在build文件夹中）中的网址有一些错误的网址，例如：

<link rel="shortcut icon" href="/BYOD/favicon.ico"/>

而不只是：

<link rel="shortcut icon" href="/favicon.ico"/>

这些网址由 CRA 自动插入。如何防止将错误的公共网址加载到index.html中？

Answer 1

一种解决方法是在我的前端目录（react-project）中添加一个.env文件，并明确设置以下内容：

PUBLIC_URL=/

我的问题现在是否有更好的解决方案，或者我的项目体系结构完全搞砸了？ 我非常想获得建议！预先感谢！

从Express Server Err提供服务React App-不支持的样式表MIME类型

更新

1 个答案: