美文网首页Web 前端开发
React 如何在 GitHub Pages 访问 index.

React 如何在 GitHub Pages 访问 index.

作者: 梁同桌 | 来源:发表于2018-03-04 07:46 被阅读296次

    问题

    GitHub Pages 生成的静态页面与 React SPA 页面冲突,由于 Pages 不能 Nginx 又不能 Node.js ,除了 index.html 路由以外其它路由都 404 错误。

    方法

    1. build 后把 index.html 复制修改为 404.html ,不管什么路由页面找不到以后,都会跳转到 404 页面。 比如我的 「 VSCode 中文社区 」

    2. 第二种方法跟本主题有点远了,不能解决上面问题,只是记录找解决方案的时候,发现多页面生成配置,React 生成多页面入口。
      项目是 creat-react-app 脚手架创建,首先执行

    npm run eject  
    

    下来在 config 中修改 webpack.config.dev.js 文件

      entry: {
        index: [
          require.resolve('./polyfills'),
          require.resolve('react-dev-utils/webpackHotDevClient'),
          paths.appIndexJs,
        ],
        oauth: [
          require.resolve('./polyfills'),
          require.resolve('react-dev-utils/webpackHotDevClient'),
          paths.appSrc + '/oauth.js',
        ]
      },
    

    修改plugins中的HtmlWebpackPlugin

        new HtmlWebpackPlugin({
          inject: true,
          chunks: ["index"],
          template: paths.appHtml,
        }),
        new HtmlWebpackPlugin({
          inject: true,
          chunks: ["oauth"],
          template: paths.appHtml,
          filename: 'oauth.html'
        }),
    

    修改config下的webpack.config.prod.js文件

      entry:
        {
          index: [
            require.resolve('./polyfills'),
            paths.appIndexJs
          ],
          oauth: [
            require.resolve('./polyfills'),
            paths.appSrc + '/oauth.js'
          ]
        },
    

    修改plugins中的HtmlWebpackPlugin

        new HtmlWebpackPlugin({
          inject: true,
          chunks: ["index"],
          template: paths.appHtml,
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
          },
        }),
        new HtmlWebpackPlugin({
          inject: true,
          chunks: ["oauth"],
          template: paths.appHtml,
          filename: 'oauth.html',
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
          },
        }),
    

    修改webpackDevServer.config.js

       historyApiFallback: {
          disableDotRule: true,
          rewrites: [
            { from: /^\/oauth.html/, to: '/build/oauth.html' }
          ]
        },
    

    在 src 文件里增加一个页面 js 单文件 oauth.js

    import React from 'react'
    import ReactDOM from 'react-dom'
    import Oauth from './js/oauth'
    import registerServiceWorker from './registerServiceWorker'
    ReactDOM.render(<Oauth />, document.getElementById('root'))
    registerServiceWorker()
    

    完成,GitHub 地址 「 VSCode 中文社区 」

    相关文章

      网友评论

        本文标题:React 如何在 GitHub Pages 访问 index.

        本文链接:https://www.haomeiwen.com/subject/dlhffftx.html