React 如何在 GitHub Pages 访问 index.
2018-03-04 本文已影响296人
梁同桌
问题
GitHub Pages 生成的静态页面与 React SPA 页面冲突,由于 Pages 不能 Nginx 又不能 Node.js ,除了 index.html 路由以外其它路由都 404 错误。
方法
-
build 后把 index.html 复制修改为 404.html ,不管什么路由页面找不到以后,都会跳转到 404 页面。 比如我的 「 VSCode 中文社区 」
-
第二种方法跟本主题有点远了,不能解决上面问题,只是记录找解决方案的时候,发现多页面生成配置,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 中文社区 」