github actions 部署vue項目

1. 創建一個vue項目

　　　　我們這使用vue-cli直接生成一個項目，確保全局安裝了vue-cli腳手架，安裝命令為npm install -g @vue/cli，打開控制台，輸入以下命令：vue create 項目名，創建一個新項目，選擇        默認配置。

2. 修改package.json文件

　　　　在package.json文件中增加一條命令，"homepage": "https://[github用戶名].github.io/[項目名]"

3.  項目根目錄下新增vue.config.js文件

　　　　module.exports = { outputDir: 'dist', publicPath: process.env.NODE_ENV === 'production' ? '/[項目名]/' : '/' }，這需要注意一下，由於github pages默認的地址是包含子目錄的，所 　　以我這這需要指定一下publicPath的路徑為我們的項目名。

4.  上傳代碼

　　　　登入我們的Github賬號，新建一個倉庫，接着進行以下操作

　　　　git init ==》 git add .  ==》 git commit -m "first commit"  ==》 git remote add origin [倉地址]  ==》 git push -u origin master

5. 在github上申請private token並且配置

　　　　（1）首先點擊我們的小頭像，然后點擊 Setting

　　　　　　

　　　　(2)  接着在左側列表中選擇 Developer setttings

　　　　　　

　　　　（3）然后在左側列表中選擇 Personal access tokens

　　　　　　

　　　　（4）最后我們點擊 Generate new token按鈕，選擇好權限，生成一個新的token，記下生成的token，一會我們還需要用到。

　　　　（5）回到我們剛新建的倉庫中，點擊倉庫的Settings

　　　　　　

　　　　（6）點擊左側的Secrets按鈕

　　　　　　

　　　　（7）點擊Add a new secret按鈕，自己起個Secret名稱（我這就叫ACCESS_TOKEN了）並填入剛申請的token值，點擊Add secret按鈕。

6.  編寫yml文件

　　　　（1）點擊Actions按鈕

　　　　　　

　　　　（2）進入Actions頁面，可以看到github給我們預設了很多模板，我們這里先不管這些，點擊 Set up a workflow yourself。

　　　　　　

　　　　（3）現在讓我們開始編寫yml文件吧，輸入以下內容，並給yml文件換個名字，我們就叫 buildAndDeploy.yml　

　　　　　　name: GitHub Actions Build and Deploy Demo

　　　　　　on:

　　　　　　　push:

　　　　　　　　branches:

　　　　　　　　　- master

　　　　　　jobs:

　　　　　　　build-and-deploy:

　　　　　　　　runs-on: ubuntu-latest # 我們選擇使用最新的ubuntu系統

　　　　　　　　steps:

　　　　　　　　- name: Checkout

　　　　　　　　　uses: actions/checkout@master # 將代碼拷貝到虛機中

　　　　　　　　　with:

　　　　　　　　　　persist-credentials: false

　　　　　　　　- name: Install and Build

　　　　　　　　　run: |

　　　　　　　　　　npm install

　　　　　　　　　　npm run-script build

　　　　　　　　- name: Deploy

　　　　　　　　　uses: JamesIves/github-pages-deploy-action@releases/v3

　　　　　　　　　with:

　　　　　　　　　　ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 使用剛新建的secret

　　　　　　　　　　BRANCH: gh-pages # 存放產物的分支名稱

　　　　　　　　　　FOLDER: dist # 存放build后產物的目錄

　　　　　　　　　　BUILD_SCRIPT: npm install && npm run build # 執行的命令

 

　　　　（4）點擊 Start commit按鈕，接着點擊 Commit new file按鈕，回到主頁面后，點擊Actions按鈕，我們可以看到action已經跑起來啦

 

7. 開啟github pages

　　　　進入項目的Settings界面，往下滑動頁面，找到GitHub Pages設置，Source選擇我們在yml文件中指定的那個分支，設置完成后可以看到一行藍色的提示：Your site is ready to be 　　published at xxxxxx，最后我們訪問 https://[用戶名].github.io/[項目名] 就可以看到自己的網站啦。

 

注意：目前github pages存放的只是靜態資源，假如你切換到某個路由，再刷新頁面時，會出現404頁面，請注意！！！

 

項目GitHub地址：https://github.com/zhenfeng95/vue-actions-deploy/

效果地址：https://zhenfeng95.github.io/vue-actions-deploy/

 

參考連接：http://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html

　　　　   https://blog.csdn.net/dikentoujing99/article/details/103681903