1

404 errors在访问静态文件（样式表、实用程序等）时，我的 React 应用程序会投入生产。开发环境运行良好。经过几天的调试和进一步的研究，我认为这是一个 webpack 路径问题，因为我对构建路径的理解，尽管我对webpack.js.orgwebpack.output进行了研究，但仍然缺乏。参考其他帖子后，我仍然无法掌握捆绑应用程序的最终概念。感谢所有帮助。请参阅下面的“尝试过的东西”、“引用的帖子”和“我的过程的注释”。谢谢你。

尝试的事情：

  1. 在 package.json 中添加了指向“https://my_ghub_username.github.io/project_repo/”的“主页”属性

  2. "homepage"将属性更改为"."

  3. 更改 React 路由器以<HashRouter/>确保其正确导入。

  4. 在再次将我的应用程序部署到 GH 页面之前，将我的最新更改推送到 main

  5. 向, , &&添加package.json了脚本pre-deploydeploybuild

引用的帖子/指南

  1. 如何将 React 应用程序部署到 GitHub Pages
  2. https://create-react-app.dev/docs/deployment/#github-pages-https-pagesgithubcom
  3. 无法将 webpack 部署到 gh-pages（反应应用程序）

我在 chrome 工具中附上了相关代码package.json( I )、webpack.dev/prod/common.js( II )、index.html( III )、文件树( IV ) 和错误( V ) 的片段。

（一） 

{
  "name": "digital-nomad",
  "version": "1.2.2",
  "description": "An immersive experience to experience life in major cities!",
  "main": "index.jsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack serve --config webpack.dev.js"
  },
  "homepage": ".",
  "dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "gh-pages": "^3.1.0",
    "googleapis": "^64.0.0",
    "inline-source-map": "^0.6.2",
    "mini-css-extract-plugin": "^1.3.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "webpack-cli": "^4.1.0",
    "webpack-merge": "^5.4.1"
  },
  "devDependencies": {
    "css-loader": "^5.0.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "html-webpack-plugin": "^4.5.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}

( IIA )

const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')



module.exports = merge(common, {

  mode: 'development',

  devtool: 'inline-source-map',

  devServer: {
    contentBase: './',
    compress: true,
    open: true,
    port: 8080,
    watchContentBase: true,
    historyApiFallback: true,
  }

})

（二）

const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')


module.exports = merge(common, {

  mode: "production",

  devtool: "source-map",

})

( IIC )

const path = require('path')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  title: 'Production',
  template: __dirname + '/index.html',
  filename: 'index.html',
  inject: 'body',
  favicon: "favicon.png"
})


module.exports = {

  entry: path.resolve(__dirname, "src", "index.jsx" ),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: './'
  },

  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /(node_modules)/, 
        use: {
          loader: 'babel-loader',
          options: { presets: ['@babel/env', '@babel/react'] }
        },
      }, 
      { test: /\.css$/i, 
        use: [ 
          {
            loader: MiniCssExtractPlugin.loader,
            options: { publicPath: '../' }
          }, 
          'css-loader'
        ],
      }
    ]
  },

  plugins: [ 
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin(),
    HTMLWebpackPluginConfig 
  ],

  resolve: {
    extensions: [".js", ".jsx", ".css", "*"]
  },

  performance: {
    hints: false
  },

  stats: {
    errorDetails: true,
    warnings: true,
    colors: true,
  },


};

（三）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="favicon.png">

    <!-- youtube video API -->
  <script rel='preload' src="https://www.youtube.com/iframe_api"></script>
    <!-- youtube data API -->
  <script rel='preload' src="https://apis.google.com/js/api.js"></script>

  <script defer src="./src/utils/YTVideoAPI.js"></script>
  <script defer src="./src/utils/YTDataAPI.js"></script>

  <script src="/dist/bundle.js"></script>
  
  <link rel="stylesheet" type="text/css" href="./src/stylesheets/player.css">
  <link rel="stylesheet" type="text/css" href="./src/stylesheets/root.css">
  <link rel="stylesheet" type="text/css" href="./src/stylesheets/controls.css">

  <title>Digital Nomad</title>
</head>
<body>.
  
  <div id="root"></div>
  
</body>
</html>

（四）

文件树

(五)

GET https://username.github.io/project_name/src/stylesheets/player.css net::ERR_ABORTED 404

笔记

在过去的几天里，我尝试了一些替代解决方案，比如利用 404 页面重定向到我的应用程序，同时仍将Browser router其用作潜在的解决方案，但不理解 webpack 的最后一个方面让我很生气，因为我知道我可以将 webpack 用于我的优势。（我真的想更好地概念化 webpack 路径以改进现有应用程序）。

最后，非常欢迎任何关于代码质量、约定和实现的反馈。

4

0 回答 0