时间戳

首页 > 解决方案 > Node.js 不会以特定的 url 路径长度加载 css

javascript - Node.js 不会以特定的 url 路径长度加载 css

问题描述

当我尝试在具有以下路径的页面上加载我的 CSS 时：

http://wwww.example.com/test= 有效！

http://www.example.com/test/test= 有效！

http://www.example.com/test/test/test=不行！

我正在使用 NodeJS、ExpressJS 和 ReactJS。我的开发服务器没有这个问题，它只发生在生产服务器上。也许它与开发依赖关系有关？

这是到目前为止的文件夹结构。

在此处输入图像描述

我的 server.js 文件

const express = require('express');
const path = require('path');
const port = 80;
const app = express();

app.use(express.static(__dirname));

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

app.listen(port);
console.log('Server started and is listening on port ', port);

index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stadro</title>
    <link rel="stylesheet" href="../src/style/global/error.css">
    <link rel="stylesheet" href="../src/style/global/global.css">
    <link rel="stylesheet" href="../src/style/webapp/dashboard.css">
    <link rel="stylesheet" href="../src/style/webapp/content.css">
    <link rel="stylesheet" href="../src/style/webapp/hubbar.css">
    <link rel="stylesheet" href="../src/style/webapp/navbar.css">
    <link rel="stylesheet" href="../src/style/website/contact.css">
    <link rel="stylesheet" href="../src/style/website/support.css">
    <link rel="stylesheet" href="../src/style/website/header.css">
    <link rel="stylesheet" href="../src/style/website/about.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body class="webapp-style">
    <div class="webapp"></div>
</body>
<script src="/dist/app/bundle.js"></script>
</html>

webpack.config.js 文件

var path = require('path');

var DIST_DIR = path.resolve(__dirname, "dist");

var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/",
    output: {
       path: DIST_DIR + "/app",
       filename: "bundle.js",
       publicPath: "/app/"
   },
   module: {
       loaders: [
           {
               test: /\.js?/,         
               include: SRC_DIR,      
               loader: "babel-loader",
               query: {
                   presets: ["react", "es2015", "stage-2"]
               }
           }
       ]
   },
   devServer: {
        historyApiFallback: true,    
        port:8080
   }
};

module.exports = config;

解决方案： 感谢@taco，我将<link>href 路径更改为从顶层开始。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stadro</title>
    <link rel="stylesheet" href="/src/style/global/error.css">
    <link rel="stylesheet" href="/src/style/global/global.css">
    <link rel="stylesheet" href="/src/style/webapp/dashboard.css">
    <link rel="stylesheet" href="/src/style/webapp/content.css">
    <link rel="stylesheet" href="/src/style/webapp/hubbar.css">
    <link rel="stylesheet" href="/src/style/webapp/navbar.css">
    <link rel="stylesheet" href="/src/style/website/contact.css">
    <link rel="stylesheet" href="/src/style/website/support.css">
    <link rel="stylesheet" href="/src/style/website/header.css">
    <link rel="stylesheet" href="/src/style/website/about.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body class="webapp-style">
    <div class="webapp"></div>
</body>
<script src="/dist/app/bundle.js"></script>
</html>

标签： javascriptcssnode.jsexpresswebpack

解决方案

尝试更改src属性以从顶层开始

<link rel="stylesheet" href="/{fullpathtocssfile}">

确定要使用的路径的最简单方法是从 shell 进行测试。

cd app

find . -name 'error.css'

href然后使用它作为源的路径。

推荐阅读