无法从Express / npm模块中找到静态资产

Question

tldr;

我的项目是ExpressJS服务器使用的NPM模块。服务器需要指定一个端点，其余的工作将由我的模块完成。如何获取模块以加载正确的html页面并从正确的路径中获取正确的js / css文件？

问题

我遇到一个问题，可以使用serveIndex库查看站点的目录结构，并且所有文件都位于其正确目录中，但是由于某种原因，当我尝试加载任何文件时，这些文件，无论是从serveIndex视图还是从应该加载的实际端点，我都只会看到404错误。

这是一个示例，如果有人想在其项目中使用此NPM模块。

app.js（其服务器）

const express = require('express')
const { adminAreaConfig } = require('express-admin-area')

const app = express()
const adminArea = adminAreaConfig(express)  // my module being passed the "express" library

app.use('/admin', adminArea)  // specify a URL to use my module

app.listen(3000, () => console.log('\n\nServer Online\n\n'))

这是构建后的项目目录结构的图像。

从console.log(__dirname)（返回<long path string>/express-admin-area/build/src）开始，然后我使用上面代码中实际服务器传递的express引用，告诉模块查看{ {1}}目录与

views

这然后尝试将... import libraries etc ... const adminAreaConfig = express => { const adminArea = express.Router() adminArea.use('/', express.static(__dirname + '/views') // sets my modules views to the "http://localhost:3000/admin" path adminArea.use('/dirs', serveIndex(__dirname)) // will get into this later ... some other stuff like exports etc ... 文件加载到index.html目录中，但是失败了，因为它无法在express-admin-area/build/src/views或express-admin-area/build/src/views/static/css内找到CSS和JS文件。 / p>

首先，我知道它失败了，因为它没有寻找.../js，而是寻找http://localhost:3000/admin/static/css/styles.css，所以这是我需要完全解决的另一个问题。

第二，回顾上面的小代码示例http://localhost:3000/static/css/styles.css，我正在使用adminArea.use('/dirs', serveIndex(__dirname))库来尝试查看目录结构。如果我转到serveIndex，则会在浏览器中获得正确的目录和文件

但是现在，如果我尝试查看实际文件，例如遇到http://localhost:3000/admin/dirs时遇到错误Cannot GET /admin/dir/main.js，但是如果出现以下情况，我可以继续更深入地浏览目录我想要图像中的http://localhost:3000/admin/dir/main.js或controllers目录。

我想要的

我需要一种方法来加载这些静态资产。如果我将模块指向带有简单routes的基本html页面，那将是我的错，但是尝试加载任何外部脚本/样式表是当我收到404错误并且没有加载任何内容时。

Answer 1

我将回答我自己的问题。

该解决方案实际上非常简单。具体来说，该模块的视图层由React，CRA处理。 CRA将寻找一些特定的环境变量，其中之一为PUBLIC_URL。我要做的就是

• 在我的CRA的根目录中创建一个.env文件
• 添加PUBLIC_URL="/admin"

然后，它只是重建项目yarn build，然后重置服务器。然后，CRA将查看http://localhost:3000/admin/static/...而不是http://localhost:3000/static/...的静态资产。