Vue项目部署到GitHub（页面空白）

总结一下自己在操作部署的时候碰到问题后的解决方法。

利用git命令将项目上传到github

在GitHub上先创建一个新的仓库，获得远程库地址

git init                         //把目录变成git可以管理的仓库
git add .			 //添加到暂存区
git commit -m 'message'          //文件提交到仓库，引号内为提交说明
git remote add origin 远程库地址  //关联到远程库
git push -u origin master        //推送到远程库

在本地打包vue项目

npm run build	//根目录下生成dist文件，即项目的静态资源

重点来了！！！！！！

先把dist下的index.html打开看下是否可以正常显示，如果页面显示空白，说明路劲不对，解决方法就是：

• vue-cli3.0 脚手架搭建完成后，项目目录中已经没有 vue.config.js了，官方文档也有说明如有需要自己配置（看官方文档的重要性啊）。

  在package.json的同目录下创建一个文件名为vue.config.js文件，文件里面内容为：

  module.exports = {
      publicPath: './'
  }
  

  吐槽一个点：就是搜索时不加上vue-cli3.0，看到的很多解决方法都是针对之前版本的脚手架，对于新手来说，就会相当懵了，这也间接说明，正确的搜索方式是多么重要啊。

• 把路由里的history模式注释掉，因为是部署到 github pages，使用这个模式去掉了 #，服务器没有配置，页面就会请求不到啦。

  export default new Router({
       //mode: 'history'
  })
  

dist下的index.html这个时候就可以显示啦（ps：针对页面空白问题，如果你存在其他问题，那就继续搜索吧）。

接着可以把dist文件夹上传到远程仓库的gh-pages分支上

git checkout -b gh-pages	//创建分支并切换
git add -f dist 		//我的文件中有.gitignore，dist文件被忽略了，所以需要加-f强制提交
git commit -m "message"
git push origin gh-pages （push文件到仓库中）

点击项目仓库的Setting，找到GitHub Pages，切换到gh-pages，点击保存。打开对应的效果展示地址就可以看到了。

比如我的展示地址就是：https://hello9102.github.io/vue-toDoList/dist

手机端正常展示，PC端无法访问

这个应该是我电脑上的代理设置问题，做个记录，你们自行选择是否食用哈。

解决方法：

1. 打开chrome的设置 =>高级 =>系统=>打开您计算机的代理设置
2. 在这里把自动检测设置关闭，打开手动设置代理下的使用代理服务器

如此以上一系列操作后，GitHub Pages上的项目就正常显示啦。至此Vue项目部署到GitHub终于成功了，可喜可贺。