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終於成功了，可喜可賀。