在 Netlify 上部署 react 应用程序成功并已发布，但未找到页面

Question

React 应用与 Webpack，通过 netlify 部署的 babel 显示 Page Not Found 尽管下载的构建在本地运行良好。

我已经通过拖放反应应用文件夹使用 netlify 拖放窗格进行部署。不是 github。

Netlify 相同的社区主题链接 -

https://community.netlify.com/t/page-not-found-error-downloaded-build-working-in-local-but-not-on-netlify-site/20094

这里不是网站 - https://gracious-roentgen-c5c8be.netlify.app/

构建状态 - 已发布部署 Production。今天上午 10:38 准备下载

部署日志 - 10:38:22 AM：开始后期处理 上午 10:38:22：后期处理 - HTML 上午 10:38:23：后处理 - 重定向规则 上午 10:38:23：后处理 - 标头规则 10:38:23 AM：后期处理完成 上午 10:38:23：网站上线

这是我的 webpack.config.js：

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

module.exports = {
    entry: ['./src/index.js', '@babel/polyfill'],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env'],
                    },
                },
            },
            {
                test: /\.css$/i,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                ],
            },
            {
                test: /\.(jpe?g|gif|png|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                        },
                    },
                ],
            },
            {
                test: /\.(gif|png|jpe?g)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'assets/images/',
                        },
                    },
                ],
            },
            // {
            //     loader: 'babel-loader',
            //     options: {
            //         presets: ['@babel/react', '@babel/env', '@babel/preset-env'],
            //     },
            // },
        ],
        // loaders: [{ test: /\.jsx?$/, loader: 'babel' }],
    },
    devServer: {
        host: '192.168.1.10', //your ip address,
        // host: '0.0.0.0', //your ip address,
        historyApiFallback: true,
        contentBase: '././src',
        port: 8080,
        disableHostCheck: true,
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve('./dist/index.html'),
        }),
    ],
    devServer: {
        // contentBase: './dist',
        contentBase: './build',
        hot: true,
    },
};

Package.json：

{
    "name": "dljalpha",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "webpack-dev-server --mode development --open --hot --host 0.0.0.0",
        "test": "jest",
        "build": "webpack --mode production"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.8.7",
        "@babel/polyfill": "^7.10.1",
        "@babel/preset-env": "^7.10.2",
        "@babel/preset-react": "^7.10.4",
        "axios-mock-adapter": "^1.18.1",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.0.6",
        "css-loader": "^3.5.3",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.2",
        "eslint": "^6.8.0",
        "eslint-config-airbnb": "^18.1.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-loader": "^4.0.2",
        "eslint-plugin-import": "^2.20.1",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-react": "^7.19.0",
        "eslint-plugin-react-hooks": "^2.5.0",
        "file-loader": "^6.0.0",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^26.0.1",
        "prettier": "^2.0.5",
        "react-hot-loader": "^4.12.19",
        "redux-mock-store": "^1.5.4",
        "style-loader": "^1.2.1",
        "url-loader": "^4.1.0",
        "webpack": "^4.42.0",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.10.3"
    },
    "dependencies": {
        "@material-ui/core": "^4.10.2",
        "@material-ui/icons": "^4.9.1",
        "@material-ui/lab": "^4.0.0-alpha.56",
        "axios": "^0.19.2",
        "core-js": "^3.6.5",
        "html-webpack-plugin": "^4.3.0",
        "husky": "^4.2.5",
        "prop-types": "^15.7.2",
        "react": "^16.13.0",
        "react-dom": "^16.13.0",
        "react-intl": "^4.6.3",
        "react-redux": "^7.2.0",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-share": "^4.2.1",
        "react-test-renderer": "^16.13.1",
        "recompose": "^0.30.0",
        "redux": "^4.0.5",
        "redux-saga": "^1.1.3",
        "regenerator-runtime": "^0.13.5"
    }
}

请指导。谢谢

Answer 1

Netlify drop 不会为您构建应用。您需要删除运行npm run build时出现的dist文件夹。

我建议您使用带有 netlify 的 git 工作流程，如果您使用 netlify 将构建您的应用程序，并且您可以更轻松地更新您的网站。为此，您需要将代码推送到 github 存储库并在 netlify 中从 git 创建一个应用程序。