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

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[=32 加载脚本=]

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

您不需要多个路由来为您的静态内容提供服务，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

Answer 2

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

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

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