vue项目添加到github page上

准备工做

一、在本身准备上传到github上的vue项目下执行 npm run build 打包生成 dist 文件夹
（上传到 github 上的即为打包生成的 dist 文件夹）。
  
二、注册 github （此处不作注册介绍，默认已经注册）
   打开 settings 设置，找到Github Pages 的设置
   点击 source 中的 None，使其成为 master 分支，点击save
   以后会看到 github pages 设置的地方多出一个地址，此处即为 github pages的地址。（以下图）
复制代码

红框中标出的即为 github pages 的地址

下面开始把准备工做中生成的 dist 文件夹提交到 github 上

一、在你电脑的磁盘上新建文件夹（这里是你要把项目放在哪便可在哪建立此文件夹），文件夹名称好比：my-project

二、而后执行git命令把你github中的项目克隆到本地：
git clone github.com/xxx/xxx.git
clone 后面的地址：

三、项目克隆到本地以后，将dist文件夹复制到 my-project 中，而后执行一下命令：

git status  --  列出当前目录全部没被git管理和被管理修改但为提交的文件，此处没被管理或者
修改成提交的文件名为红色。

git add .  --  添加当前目录下的全部文件和子目录（执行完以后，在执行 git status 此时文件
变成绿色即为准备好了提交。）

git commit -m "这次提交要添加的注释内容写在此处"

git push  --  提交项目到你的github上（此处按完回车须要输入你本身的 github帐号/密码）
而后等待提交便可。
复制代码

提交完成打开你的 github 便可看到你的dist文件夹已经提交到了 github 上，在打开你的github pages 地址:
jianchaoblog.github.io/dist/index.…
地址后面的 dist/index.html 即为你上次的目录名和页面的名称。

此处须要注意的点为，我在按照上述步骤提交完代码以后，打开 github pages 地址，页面为空白，不显示本身的页面，这块的缘由在调试以后发现是由于：

在 npm run build 以前要把 config/index.js 里面 build 配置项的 assetsPublicPath: '/' 改成 assetsPublicPath: './'而后在提交代码便可