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

【问题标题】：Node.js won't load css at a specific url path lengthNode.js 不会以特定的 url 路径长度加载 css
【发布时间】：2018-11-06 02:04:47
【问题描述】：

当我尝试在具有以下路径的页面上加载我的 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>

【问题讨论】：

导航到example.com/test/test时控制台是否显示任何错误
@FadiAboMsalam ，我没有看到任何错误。当我导航到 example.com/test/test/
所以检查页面并检查你的css链接是否显示在那里如果点击css的url是否加载
头部显示 css 路径，当我点击它时，它会将我重定向到正确的文件。但如果路径错误（如上例），则 css 文件中没有任何内容。

标签： javascript css node.js express webpack

【解决方案1】：

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

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

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

cd app

find . -name 'error.css'

然后使用 href 源的路径。

【讨论】：

感谢工作！在上面的帖子中添加了解决方案！