Node.js生产环境下长URL路径无法加载CSS的问题求助

我帮你理清楚这个问题的来龙去脉，以及对应的解决方案——这其实是SPA项目里很常见的相对路径解析坑，开发环境因为webpack-dev-server的特性没暴露出来，到生产环境就显现了。

问题场景回顾 #

你用Node.js + Express + React搭建的项目，出现了这样的情况：

• 访问一级路径http://www.example.com/test、二级路径http://www.example.com/test/test时，CSS加载完全正常
• 访问三级路径http://www.example.com/test/test/test时，CSS直接加载失败
• 开发服务器（webpack-dev-server）下没有任何问题

项目文件夹结构 #

your-project/
├── client/
│   ├── src/
│   │   ├── components/
│   │   └── index.js
│   ├── public/
│   │   └── index.html
│   └── webpack.config.js
├── server/
│   └── server.js
└── package.json

相关代码展示 #

server.js #

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

// 托管dist目录下的静态资源
app.use(express.static(path.join(__dirname, '../client/dist')));

// SPA路由：所有请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/dist/index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

有问题的index.html（生产环境） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
  <!-- 这里的相对路径是问题根源 -->
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>

webpack.config.js #

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './client/src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './client/public/index.html',
    }),
  ],
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
};

问题原因分析 #

开发环境中，webpack-dev-server会把所有打包后的资源（包括CSS、JS）都挂载到网站根路径下，所以当你用相对路径main.css时，浏览器会自动解析为http://localhost:8080/main.css，能正确找到资源。

但到了生产环境，当你访问三级路径/test/test/test时，浏览器会把相对路径main.css解析为http://www.example.com/test/test/main.css——而你的实际CSS文件是放在dist根目录下的（也就是http://www.example.com/main.css），自然就找不到了。

解决方案 #

方案1：手动修改资源路径为根路径格式 #

直接把<link>和<script>的href/src改成以/开头的根路径，这样不管当前URL是几级路径，浏览器都会从网站根目录去查找资源：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
  <!-- 修改为根路径 -->
  <link rel="stylesheet" href="/main.css">
</head>
<body>
  <div id="root"></div>
  <!-- JS文件也建议同步修改 -->
  <script src="/bundle.js"></script>
</body>
</html>

方案2：通过webpack配置自动添加根路径（更推荐） #

在webpack.config.js的output中添加publicPath: '/'，这样HtmlWebpackPlugin会自动给所有打包生成的资源路径加上根前缀，无需手动修改index.html：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: '/', // 添加这一行，指定根路径作为资源基础路径
},

重新打包部署后，不管访问几级路径，CSS和JS资源都会被正确加载。

内容的提问来源于stack exchange，提问作者Michiel