vue專案上傳Github預覽

qfstudy發表於2018-11-05
VueGithub

最近在用Vue仿寫cnode社群，想要上傳到github，並通過Github pages預覽，在這個過程中遇到了一些問題，因此寫個筆記，以便查閱。

完成Vue專案以後，在上傳到github之前，需要修改一些配置才能通過github pages預覽專案。

一、修改配置

  1. 解決檔案路徑問題：

開啟專案根目錄config資料夾下的index.js檔案，進行如下修改：
1.png

看清楚是 build（上邊還有個dev 是開發環境下的配置，不需要改動）下的 assetsPublicPath ：將‘/`改為‘./`

  1. 背景圖片路徑錯誤

在css中寫的background-img的路徑出錯需要找到build資料夾下的utils.js，修改一下位置
開啟根目錄build資料夾中的utils.js檔案，在下圖中標出的位置中新增publicPath: `../../`，　
2.png

  1. 專案打包後dist資料夾下的index.html引入檔案沒有引號，這裡的解決方法是：

找到build資料夾下的webpack.prod.conf.js檔案，在webpack.prod.conf.js找到new HtmlWebpackPlugin中的minify，把minify中的 removeAttributeQuotes: true改為 removeAttributeQuotes:false
3.png

二、上傳專案到Github

執行npm run build命令，打包專案

如果只是想通過github pages預覽專案，不想上傳整個專案程式碼，可以只將dist資料夾下的檔案上傳到github上，然後開啟github pages功能預覽。在dist資料夾下執行以下步驟

1.在github裡面新建一個倉庫
2.將dist資料夾中的檔案上傳到這個倉庫中

  • git init
  • git add .
  • git commit -m `描述資訊`
  • 關聯到遠端倉庫：git remote add origin ...
  • git push -u origin master

如果想管理專案的同時又可以預覽，可以將整個專案都上傳到github，然後將dist資料夾中的檔案上傳到倉庫分支中，步驟如下：

1.在github裡面新建一個倉庫,
2.將整個專案上傳到github

  • git init
  • git add .
  • git commit -m `描述資訊`
  • 關聯到遠端倉庫：git remote add origin ...
  • git push -u origin master

3.然後將遠端倉庫克隆到本地
git clone ...

4.接著在這個倉庫中建一個分支
生成分支gh-pages並切換到此分支
進入到克隆得到的資料夾中，執行如下命令
git checkout --orphan gh-pages

5.將克隆得到的檔案裡面除了.git檔案以外的檔案全部刪掉，再將專案根目錄下打包後生成的dist資料夾裡面的內容複製到克隆檔案中。
依次執行以下命令：
git add .
git commit -m “描述資訊”
git remote add origin ….（這一步根據自己建立的倉庫名來寫）
git push -u origin gh-pages （push檔案到倉庫中,注意後面是分支的名字,不是master）

相關文章