如何将 React 应用程序部署到 GitHub Pages

Question

我在将 React 应用程序部署到 GitHub Pages 时遇到问题。 该应用程序在本地运行良好，但在完成标准部署流程后 - 通过终端安装 GH 页面，运行npm run build/deploy等 - 页面无法加载。

部署是成功的，因为它在我的 GitHub 存储库中创建了一个环境，并且它为我提供了“查看部署”的选项，但是页面没有加载。 如果我检查页面，它会给我以下错误：

Failed to load resource: the server responded with a status of 404 () bundle.js:1

我的 package.json 看起来像这样 -

{
  "homepage": "https://andre-urbani.github.io/GA-Project-2-Quiz-API",
  "name": "basic-react-webpack-setup",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server --mode=development",
    "build": "webpack -p",
    "predeploy": "npm run-script build",
    "deploy": "npm build && gh-pages -d dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "gh-pages": "^2.2.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bulma": "^0.7.5",
    "file-loader": "^5.0.2",
    "lodash": "^4.17.15",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.3.0",
    "url-loader": "^3.0.0"
  }
}

我的 webpack.config.js 看起来像这样 -

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

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve('dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
      { test: /\.s(a|c)ss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] }
    ]
  },
  devServer: {
    contentBase: path.resolve('src'),
    hot: true,
    open: true,
    port: 8000,
    watchContentBase: true,
    historyApiFallback: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ]
}

Answer 1

将package.json homepage设置为"." 应该可以解决您的问题。

您缺少主页路径末尾的/ ，但值为. 整体会更灵活。