使用 express 的 Node.js 中的静态路由问题

Question

我遇到了一些自定义路由代码的问题，一切正常，并且与我所做的客户端视图路由同步，但是一旦我有了子页面，它就无法正确路由我的静态文件.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

它不会给我根目录中的文件，而是像来自子文件夹一样提供它。

示例：我转到 http://localhost/sign-up，从 /scripts 加载到我的索引文件中的文件已加载，但如果我转到http://localhost/sign-up/2，它会尝试从 /sign-up/scripts

加载脚本

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

const app = express();

app.use('/views', express.static(path.resolve(__dirname, 'frontend', 'views')));

app.use('/styles', express.static(path.resolve(__dirname, 'frontend', 'styles')));
app.use('/scripts', express.static(path.resolve(__dirname, 'frontend', 'scripts')));
app.use('/media', express.static(path.resolve(__dirname, 'frontend', 'media')));

app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'frontend', 'newSite.html'));
});

app.listen(process.env.PORT || 1234, () => console.log('Server is now running...'));

为了解决这个问题，我一直在 youtube 上关注 DCODE 提供的这些教程，但我看不出有什么不妥：

https://www.youtube.com/watch?v=6BozpmSjk-Y

https://youtu.be/OstALBk-jTc

Answer 1

注册文件夹中加载的资源应使用以“/”字符开头的 URL，以使它们相对于站点根目录，例如

src="/scripts/modulefile.js"
href="/css/stylesheet.css"
href="/media/image.png"

而不是相对于注册文件夹的 url - 如果前导 '/' 被省略，它们将是。

Answer 2

您不需要多个路由来提供静态内容，express 的 static 方法可以为您完成此类任务：

// If your 'public' or 'static' directory is one of root directories
app.use(express.static(process.cwd() + '/public'));

// so all these requests will be served:
// -> /public/styles/custom.css
// -> /public/scripts/pollyfils.js
// -> /public/media/logo.png