Question

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

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

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

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

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

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

我的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>

Answer 1

尝试将Intersection Observer属性更改为从顶层开始

src

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

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

cd app

然后使用find . -name 'error.css'来源的路径。

Node.js不会在特定的url路径长度上加载css

1 个答案: