运用npm-scripts宣布Github Pages

将项目打包后布置到GitHub Pages 上是罕见需求。
这里总结下经由历程npm-srcrips将项目宣布到gh-pages分支。须要运用到gh-pages的库。

须要用到的环境

• node
• npm 或许yarn
• 当地项目，须要经由历程create-react-app建立的React或许vue-cli建立的Vue项目
• gh-pages
• Github账户

历程

1. 在 GitHub 上建立与当地项目同名的长途堆栈

2. 建立当地项目

React: create-react-app

$ yarn global add create-react-app
$ create-react-app my-app

如果运用npm5.2+版本

$ npx create-react-app my-app
$ cd my-app
$ yarn start

Vue: vue-cli
@vue/cli 3.0

$ yarn global add @vue/cli
$ vue create my-app

vue-cli@2.x

$ yarn global add @vue/cli-init
$ vue init webpack my-app

然后运转项目：

$ cd my-app
$ yarn install 
$ yarn start

3.将当地项目 push 到长途：

$ git init
$ git add .
$ git commit -m 'create app'
$ git remote add origin <git url>
$ git push -u origin master

4.增加npm-scripts：

Vue:
在package.json中增加

"scripts": {
    "pregh": "npm run build",
    "gh": "gh-pages -d dist"
}

React:
在package.json中增加

"scripts": {
    "pregh": "npm run build",
    "gh": "gh-pages -d dist"
}

Vue在build时天生的目次是dist，而React在build时天生的目次时build。
gh是自定义的剧本称号，你也能够叫gh-deploy等等。
想要在剧本实行之前还别的实行其他敕令，就在自定义剧本前增加预处理钩子，情势是pre加gh剧本称号。
关于npm-scripts的学问，参考：
npm scripts 运用指南
用 npm script 打造超溜的前端工作流（需付费）

5.修正publickPath

此时，虽然能够宣布，但一切相干的静态文件的目次都是指向https://<username>.github.io的，而现实的静态文件的位置是在https://<username>.github.io/<repo-name>中。
Vue:
在npm build之前，修正config/index.js的设置：

module.exports = {
    ...
    build: {
        ...
        assetsPublicPath: '', // 此处原来是assetsPublicPath: '/'
        ...
    }

React:
与Vue差别，create-react-app是将一切scripts文件隐蔽的。想要将讲台文件指向准确的目次，是经由历程在package.json中增加homepage选项。

{
    "author": ...,
    "homepage": "https://<username>.github.io/<repo-name>",
    ...
    "scripts": { ... }
}

6.天生临盆版本，并布置到Github Page

$ npm run gh
# or
$ yarn run gh

检察长途的gh-pages分支，此时分支下应包括一个index.html和其他静态文件（如static目次）。
以后就能够经由历程https://<username>.github.io/<repo-name>接见应用程序了。

相干参考：
React的github pages 宣布，Deploying a React App* to GitHub Pages
如安在 GitHub Pages 上布置 vue-cli 项目