使用 express 为非根路径提供静态文件答案

【问题标题】：Serving static files with express for non-root paths使用 express 为非根路径提供静态文件
【发布时间】：2017-07-30 01:16:09
【问题描述】：

我正在使用 express 来提供一个 react 应用程序（使用 Create React App 引导）。该项目的文件结构如下：

|--client/
|    |--build/
|    |    |--static/
|    |    |    |--main.css
|    |    |    |--main.js
|    |    |
|    |    |--index.html
|    |
|    |--public/
|    |--src/
|
|--server/
     |--index.js

构建文件夹包含所有静态文件，我想从非根 url 提供它们。快递服务器已配置：

app.use('/some_path', express.static(path.resolve(__dirname,'../client/build')));

在我的 index.html 中，我最初有带有 href='/static/main.css 和 src='/static/main.js 的 .css 和 .js 文件，它们不起作用（404 错误），因为我相信服务器会尝试在 @987654325 下查找文件@ 为文件而不是找到它们。

当我尝试将 index.html 中的路径更改为 href='/some_path/static/main.css 时，我得到了所有请求文件的 200 个状态（发送的文件与原始文件匹配），但页面上没有呈现任何内容。检查 html 页面会在正文中显示：

<div id="root">
    <!-- React empty: 1 -->
</div>

知道我在这里做错了什么吗？使用 React Create App 时是否缺少一些简单的东西或需要配置的东西？

【问题讨论】：

要让href='/static/main.css' 工作，您只需要app.use(express.static(path.resolve(__dirname,'../client/build')));。这将是提供静态文件的正确方法。
是的，它适用于app.use(express.static(...))，但我想对其进行配置，以便仅向特定路由的请求提供静态文件。从我读过但到目前为止对我不起作用的内容看来这是可能的
好吧，我给了你一些有用的东西，但你拒绝了。我不太了解您未说明的要求，无法提出其他建议。

标签： javascript html reactjs express

【解决方案1】：

https://expressjs.com/en/starter/static-files.html

该文档已经说过以下内容：

要为 express.static 函数服务的文件创建虚拟路径前缀（该路径实际上并不存在于文件系统中），请指定静态目录的挂载路径，如下所示：

app.use('/static', express.static('public'))

例如：路径如下：

https://localhost:port/product/new

如果文件夹“public”中的所有 .JS 和 .CSS 文件，通常 Express 将返回无法加载 .JS 和 .CSS 文件的错误。我们只需要包含以下行：

app.use('/product', express.static('public'))

【讨论】：