Web 前端开发

React 如何在 GitHub Pages 访问 index.

2018-03-04  本文已影响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 中文社区 」

上一篇下一篇

猜你喜欢

热点阅读