使用react-snap后资源URL指向localhost，无法部署至生产环境

核心原因 #

react-snap预渲染时默认使用本地开发服务器地址生成资源URL，而非相对路径或生产环境基础路径，导致部署后资源无法正常加载。

解决方案 #

1. 配置webpack的publicPath #

在webpack.config.js的output字段中添加publicPath，生产环境设置为相对路径'./'，确保webpack打包时资源采用相对路径：

output: {
  filename: 'index.js',
  path: path.resolve(__dirname, 'dist'),
  publicPath: './' // 新增配置
}

2. 调整react-snap配置 #

在package.json的reactSnap配置中添加publicPath，指定预渲染时使用相对路径：

"reactSnap": {
  "source": "dist",
  "publicPath": "./" // 新增配置
}

若CSS背景图路径仍异常，可开启inlineCss选项，确保样式中的资源路径被正确处理：

"reactSnap": {
  "source": "dist",
  "publicPath": "./",
  "inlineCss": true
}

3. 生产环境替换style-loader为mini-css-extract-plugin #

style-loader会将CSS注入JS中，可能导致react-snap预渲染时路径处理异常。生产环境建议用mini-css-extract-plugin生成独立CSS文件：

• 安装依赖：

npm install mini-css-extract-plugin --save-dev

• 修改webpack.config.js的CSS规则：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// ...

module: {
  rules: [{
    test: /(\.s[ac]ss|css)$/i,
    use: [
      process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
      'css-loader',
      'resolve-url-loader',
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true
        }
      }
    ]
  }]
},

plugins: [
  // ...
  new MiniCssExtractPlugin({ filename: '[name].css' }) // 新增插件
]

完成以上配置后，重新执行npm run build和react-snap，生成的静态HTML中资源URL会变为相对路径，可正常部署到生产环境。

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