Vue 項目部署到GitHub Pages

前言：相信很多前端開發者都擁有自己的vue項目，若想把自己的項目做成網站分享給大家看，最常用的就是利用Github提供的GitHub Pages服務和Gitee提供的Gitee Pages服務。其中，Github是國外網站，Gitee是國內網站（訪問速度較快）。本文給大家介紹的是如何將 vue-cli 3.0+項目部署到github pages

項目配置注意事項

1、vue-router 不要開啟 history 模式

正常項目中我們會因為網站路徑中帶有“#”而將vue-router開啟history模式，以去掉#號。但開啟history模式需要服務器的支持，因此在github pages中不支持這一模式，所以我們不能開啟history模式。

2、在 vue.config.js 中設置正確的 publicPath

要將項目部署到 https:// .github.io/ <REPO>/ 上 (即倉庫地址為 https://github.com/ <USERNAME>/ <REPO>)，可將 publicPath 設為 "/ <REPO>/"。
舉個例子，我的倉庫名字為“ home_page”，那么 vue.config.js 的內容應如下所示：

// vue.config.js
const ENV = process.env.NODE_ENV;

module.exports = {
  publicPath: ENV === "development" ? "" : "/home_page/", # 關鍵代碼
};

部署github項目

手動推送更新

在項目根目錄下，創建內容如下的 deploy.sh 文件

# `deploy.sh`

# 當發生錯誤時中止腳本
set -e

# 構建
yarn build

# cd 到構建輸出的目錄下 
cd dist

git init
git add -A
git commit -m 'deploy'

git remote add origin https://gitee.com/cjh-1996/home_page.git
# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f origin master

cd -