带有gh页面的部署反应应用程序的问题

Question

使用gh-pages部署我的react应用程序时遇到问题。我尝试了YT和Google第一个站点的所有指南。而且我的GitHub页面仍未显示应用程序。链接到我的仓库： https://github.com/maksymilianMroz/react-todo-app

问题是问题出在哪里？我没有在代码中写东西吗？我怎样才能解决这个问题？ （我想通过ghpages在我的react应用上实时预览）

Answer 1

当您打开项目站点https://maksymilianmroz.github.io/react-todo-app/并在启用浏览器的开发人员工具的情况下进行完全刷新时，您会看到所有javascript和css引用均产生404。这是因为所有url都带有前缀const path = require('path'); const glob = require('glob'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const webpack = require("webpack"); module.exports = (env, options) => ({ optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }), new OptimizeCSSAssetsPlugin({}) ] }, entry: { 'vendor': glob.sync('./vendor/**/*.js'), './js/app.js': ['./js/app.js'] }, output: { filename: '[name].js', path: path.resolve(__dirname, '../priv/static/js') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: '../css/app.css' }), new CopyWebpackPlugin([{ from: 'static/', to: '../' }]), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] }); 。

例如https://maksymilianmroz.github.io/maksymilianMroz/react-todo-app/static/css/main.fbf7fb8c.chunk.css

应该在https://maksymilianmroz.github.io/react-todo-app/static/css/main.fbf7fb8c.chunk.css的位置

这是由package.json文件的homepage属性引起的，如maksymilianMroz的输出所示

如果您在package.json中调整该属性，您的构建就可以了。

npm run build