如何編譯 Vue Cli 完整專案

1. vue 在本地端 npm run build 就會產生編譯

npm run build

2. 使用 vue ui 可以透過介面調整編譯後的參數。

vue ui

設定 > vue cli > 公開路徑 > 加上 /dist/

產生 vue.config.js

哪些時機需要執行編譯?

1. 當專案完成後，需要把檔案交給後端部屬，必須去調整路徑，符合後端適合的路徑

2. 部屬到 github 上

如何部署 Vue CLI 專案至 GitHub Pages

參考資料 : GitHub Pages# 手動推送更新

新增vue.config.js

//vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

上傳檔案

// master branch
git init
git add .
git commit -m "網頁未編譯程式碼"
git remote add origin Github遠端數據庫
git push Github遠端數據庫 分支

// gh-pages branch
npm run build
cd dist
git init
git add -A
git commit -m "網頁編譯完的輸出檔案"
git push -f Github遠端數據庫 分支:gh-pages
// git push -f https://github.com/<USERNAME>/<REPO>.git master:gh-pages

//git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

deploy.sh

這段指令只能在git bash上執行

新增一個deploy.sh的檔案

npm run build
cd dist
git init
git add -A
git commit -m "deploy"
git branch -M main
git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages

之後用以下指令就可以自動跑以上流程

sh deploy.sh