如何将React应用程序部署到GitHub Pages [英] How to deploy a React app to GitHub Pages

问题描述

我在将我的React应用程序部署到GitHub Pages时遇到问题.该应用程序在本地可以正常运行，但是在完成了标准的部署过程后-通过终端安装GH页面，运行 npm运行构建/部署等-页面无法加载.

I'm having issues with deploying my React app to GitHub Pages. The app works fine locally, but after going through the standard process for deployment - installing GH pages via the terminal, running npm run build/deploy etc - the page does not load.

就在我的GitHub存储库中创建环境而言，部署是成功的，它为我提供了查看部署"的选项，但随后页面无法加载.如果我检查页面，则会出现以下错误:

The deployment was successful in terms of it creating an environment in my GitHub repo, and it gives me the option to 'view deployment', but then the page just doesn't load. If I inspect the page it gives me the following error:

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

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

My package.json looks like this -

{
  "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看起来像这样-

and my webpack.config.js looks like this -

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'
    })
  ]
}

推荐答案

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

Setting homepage in package.json to "." should resolve your issue.

您在首页路径的末尾缺少/，但是值.总体上更加灵活.

You're missing the / at the end of your homepage path, but a value of . will be more flexible overall.

这篇关于如何将React应用程序部署到GitHub Pages的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！