Nuxt 部署至 GitHub (靜態頁部署)

在 GitHub 開一個 Repository

 

建立一個 Nuxt 專案並加入 github

git init
git add .
git commit -m "init"
git remote add origin https://github.com/xxxxxxxx/testpage.git

 

安裝 cross-env

npm install cross-env --dev

 

在 package.json 加入

"scripts": {
  "build:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt build",
  "generate:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt generate"
},

 

在 nuxt.config.js 加入

const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
  router: {
    base: '/<repository_name>/'
  }
} : {}

export default {
  /* 原本其他的設定 */
  , ...routerBase
}

因為 GitHub 靜態頁面是使用 <repository_name> 去開虛擬目錄

所以記得將 <repository_name> 修改為所開的資源名稱

 

安裝 push-dir

npm install push-dir --dev

 

在 package.json 再加入 deploy 設定

"scripts": {
  "build:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt build",
  "generate:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt generate",
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
},

 

設定完後將未 commit 的調整 commit 後

執行以下兩行指令即可部屬至 GitHub

npm run generate:gh-pages
npm run deploy

 

 

參考:https://ithelp.ithome.com.tw/articles/10209553

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *