react项目部署到github

(可参考代码地址https://github.com/xiaoyaoyimei/my-app)主要是参考app.js中history配置和package.json。

在你的项目可以yarn build的基础下
1.安装cnpm install gh-pages(建议使用cnpm--yarn安装有点问题)

2.配置package.json内容中的scripts中添加一行配置

"gh-pages": "react-scripts build && gh-pages -d build"

若有配置过antd中的react-app-rewired，则直接配置

  "gh-pages": "react-app-rewired build && gh-pages -d build"

整体如下
"scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject",

      "gh-pages": "react-scripts build && gh-pages -d build"

  },

3.除此之外在package.json配置"homepage":"/my-app",此处跟你的仓库名保持一致即可。（超级重要）若不配置默认的就是你直接放在根目录下的地址。发布到github中会因为地址缺少仓库名所有链接都报错。

跟此处相匹配的配置是在App.js中配置导入import createHistory from 'history/createHashHistory'

const history = createHistory({

    basename: homepage

  })

<Router history={history}>...</Router >

每次发布运行yarn gh-page即可

另一个注意点是请求的时候：

axios.get('/api/home.json')注意去掉api之前的/改成axios.get('api/home.json')。

 

---

强烈不建议使用(当然也有可能是我git不熟悉)

yarn build

git checkout -b gh-pages

git add -f build

git commit -m 'create project'

git subtree push --prefix build origin gh-pages

这样发布以后，如果想再次发布，真的是个坑。

因为你现在在gh-pages分支了，（若直接git add .）很容易将master的分支提交。而且在切换分支的来回过程中代码极容易将不同分支代码搞混。

若想再次提交我的做法是强制切换分支git checkout master -f

删除分支 git branch -D gh-pages

删除远程分支 git push origin --delete gh-pages

然后再继续上面的指令。