vue-cli脚手架项目上传到github

一、npm run build

项目制作完成后需执行npm run build操作将项目打包。

这时项目的目录下会生成一个 dist文件夹，它里面又包含一个static文件夹和一个index.html文件，这是webpack 最终打包好的文件.

image.png

如果你打开这个index.html会发现页面显示是空白的。打开控制台，细心的朋友可能会发现， script 标签的引入路径好像不对啊，因为 static文件夹和 index.html是在同一个目录下的，这里却是从根目录引入static下的文件，正确的路径应该是 ./开头的相对路径： src='./static/...'或者 src='static/...'

其实这跟配置资源的路径有关，打开项目根目录 config 文件夹下的 index.js，定位到 build下的assetsPublicPath（dev下也有一个assetsPublicPath，别搞错了，我就是在这里踩了第一个坑），把
assetsPublicPath: '/'修改为assetsPublicPath: './'

image.png

重新执行npm run build，再打开index.html 文件，页面就有内容了。

二、上传到github

本地预览问题解决了，接着我们把项目push 到 github。

在github建好仓库，然后git clone....,git add .,git commit -am "init",git push一系列操作后，发现dist文件没有被上传到 github上。这是为什么呢？

找到项目根目录的.gitignore文件，这里设置一些文件名，对应的文件将不会被提交到 github上面，而 dist被设置在里面，所以就不能上传到 github上了，我们可以把dist 从文件里移除。 当然还有另一种办法，就是在操作 git 命令时，把 git add . 改为 git add -f dist意思是强制把 dist文件提交到 github 。

好了，现在我们已经可以在 github 仓库里看到 dist 文件夹。接下来就可以设置预览效果了。
点击项目的 setting 项，然后找到Github Pages

image.png
选择 master branch ，保存，接着你会看到项目在线预览链接，点击链接.
image.png
此时，你会看到页面一片空白，别急，在地址栏后面添加 dist（因为 index.html是在 dist目录 下），回车，好了，线上页面效果出来了 image.png

三、另外一种方法

在项目的 master分支上，混合了源代码和页面预览文件，能不能把两者分开？而且还有一个问题，index.html总是在dist路径下的，能不能项目名称直接跟index.html 。这里就引出另外一种办法了。

采用 github 的gh-pages分支制作 GitHub Pages ，只把dist添加到 gh-pages 分支,这样就把源代码和页面预览文件分开了
（先把本地的dist文件夹删除，再上传到 github ，更新 master分支）

git run build      
git branch gh-pages   //创建gh-pages分支
git checkout gh-pages  //切换到gh-pages分支
git add -f dist     //强制把dist文件夹提交到github
$ git subtree push --prefix dist origin gh-pages  //把dist文件夹单独部署到gh-pages分支

image.png
这里要选择gh-pages branch ，再点击连接，如果此时看到空白页面，别急，稍等一会（内容更新需要时间）
好了，现在看仓库的master分支，不存在 dist文件夹了，再看线上预览地址，也完美了.