【问题标题】:Use CSS and JS client files linked to html with express app on zeit-now在 zeit-now 上通过 express 应用程序使用链接到 html 的 CSS 和 JS 客户端文件
【发布时间】:2020-01-22 03:13:13
【问题描述】:

我有一个简单的 Express 应用程序,它为我的公用文件夹中的 html 文件定义路由。在这个 index.html 文件中,我链接了位于同一文件夹中的 css 和 js 文件。当我使用 npm start 时,它可以正常工作,但是当我在 zeit-now 上发布它时,我得到 js 文件的错误 404 并且 “拒绝应用来自 'https://test.julienmerasli.now.sh/public/style.css' 的样式,因为它的 MIME 类型('text/html ') 不是受支持的样式表 MIME 类型,并且启用了严格的 MIME 检查。”用于 css 文件。
这是我的部署:https://test.julienmerasli.now.sh/
这是我的项目:https://gitlab.com/chaudoinblazin/test-zeit-now-css

【问题讨论】:

    标签: javascript css node.js express vercel


    【解决方案1】:

    查看您的代码 - 我认为问题在于您用于引用 css 和 js 文件的路径。

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="public/style.css">
        <script type="text/javascript" src="public/index.js"></script>
        <title></title>
    </head>
    <body>
        <button onclick="buttonClicked()">This is a button</button>
    </body>
    </html>
    

    public 文件夹中提供的文件将在您的网站根目录中可用,例如https://test.julienmerasli.now.sh。现在虽然您的 html 会在 https://test.julienmerasli.now.sh/public 中查找 css 和 js 文件。

    因此,在 html 中,您只需删除 hrefsrc 路径上的 public 部分,这应该可以工作。

    不确定您要构建什么,但如果您只想提供一些静态或简单的 API 文件,您可能不需要 Express。查看此migration guide 以获得良好的介绍。

    【讨论】:

    • 我尝试了您的解决方案,但它似乎不起作用。我终于通过将app.use(express.static(path.join(__dirname, "/")));添加到我的server.js中找到了css的解决方案,但是我的js文件仍然没有找到。我目前找到的唯一解决方案是添加 app.get("/public/index.js", (req, res) => { res.sendFile(__dirname + "/public/index.js"); }) ;但是如果我必须对每个文件都这样做,那将是有问题的,所以我仍然在寻找更好的解决方案。然后,如果你想知道,那么我想做一个快速护照 socket.io 应用程序,所以我认为我不能做不同的事情
    • 仍然不确定我是否理解您到底想要做什么,但您仍然可以以常规方式提供静态文件:zeit.co/docs/builders#official-builders/static。此外,您可以使用now.json 配置文件检查路由是否更容易配置:zeit.co/docs/v2/advanced/configuration
    猜你喜欢
    • 2019-08-09
    • 1970-01-01
    • 2018-07-15
    • 2017-01-04
    • 1970-01-01
    • 1970-01-01
    • 2013-03-05
    • 1970-01-01
    • 2019-10-11
    相关资源
    最近更新 更多