Create React App项目部署GitHub Pages时媒体资源加载404求助

我使用create-react-app创建的React项目部署到GitHub Pages时遇到问题：执行npm run build后上传构建内容，最初资源无法加载。手动在index.html中添加<base href="./" />，修改asset-manifest.json中所有路径为相对路径（添加./），并在manifest.json中设置"start_url": "https://ilDeffo.github.io/MyProject/"。目前大部分资源可正常加载，但媒体文件（.png、.jpg）的URL缺少/MyProject/路径，仍报404错误。

相关文件内容 #

index.html #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <base href="./" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
            name="description"
            content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="/logo192.png" />
        <link rel="manifest" href="/manifest.json" />
        <title>MyProject</title>
        <script defer="defer" src="/static/js/main.238dbb45.js"></script>
        <link href="/static/css/main.23037022.css" rel="stylesheet" />
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

manifest.json #

{
    "short_name": "MyProject",
    "name": "MyProject",
    "icons": [
        {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 16x16",
            "type": "image/x-icon"
        },
        {
            "src": "logo192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "logo512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": "https://ilDeffo.github.io/MyProject/",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}

assets-manifest.json #

{
  "files": {
    "main.css": "./static/css/main.23037022.css",
    "main.js": "./static/js/main.238dbb45.js",
    "static/js/453.d7c8ad91.chunk.js": "./static/js/453.d7c8ad91.chunk.js",
    "static/media/my_image.jpg": "./static/media/my_image.3b164cd332d9eaf73dd0.jpg",
    "static/media/my_image2.png": "./static/media/my_image2.95a63c7274aa5a772bd0.png",
    "index.html": "./index.html",
    "main.23037022.css.map": "./static/css/main.23037022.css.map",
    "main.238dbb45.js.map": "./static/js/main.238dbb45.js.map",
    "453.d7c8ad91.chunk.js.map": "./static/js/453.d7c8ad91.chunk.js.map"
  },
  "entrypoints": [
    "./static/css/main.23037022.css",
    "./static/js/main.238dbb45.js"
  ]
}

项目结构 #

MyProject
|
|__ public
|   |
|   |_ favicon.ico    
|   |_ index.html 
|   |_ logo192.png
|   |_ logo512.png
|   |_ manifest.json
|   |_ robots.txt
|
|__src
|   |_ assets
|   |  |
|   |  |_my_image.png
|   |  |_my_image2.png
|   |
|   |_ css
|   |  |
|   |  |_index.css
|   |
|   |_ App.js
|   |_ index.js
|
|_ package.json

解决方法 #

1. 配置package.json的homepage字段（推荐） #

在package.json中添加以下字段，create-react-app会自动处理所有资源路径，无需手动修改构建后的文件：

"homepage": "https://ilDeffo.github.io/MyProject/"

2. 使用gh-pages工具自动部署 #

安装部署工具：

npm install gh-pages --save-dev

在package.json的scripts中添加：

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

之后执行npm run deploy，工具会自动构建并上传到GitHub Pages分支，全程无需手动操作。

3. 修复现有手动修改的问题（临时解决） #

• 修改index.html的base标签为项目路径：

  <base href="/MyProject/" />
  

  同时去掉所有资源路径开头的/，比如href="/favicon.ico"改为href="favicon.ico"
• 代码中引用媒体文件时，使用相对路径或者通过process.env.PUBLIC_URL拼接：

  // 方式1：import引入（推荐）
  import myImage from './assets/my_image.png';
  <img src={myImage} alt="my image" />
  
  // 方式2：使用PUBLIC_URL
  <img src={`${process.env.PUBLIC_URL}/assets/my_image.png`} alt="my image" />
  

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