Git Hub Page - daniel-qa/Vue GitHub Wiki

網頁通常是: https://你的帳號.github.io/vue2-hello-world/。

npm run build

npm run deploy

---

• 1 . 在 root 目錄，修改 vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({

  // 加上這一段，確保部署到 GitHub Pages 時路徑正確
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue2-hello-world/'
    : '/',	
	
  transpileDependencies: true,
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      return {
        devtool: 'cheap-module-source-map'
      }
    }
  }
})

• 2 . 在 package.json，加入部署用的指令（scripts加入 deploy）。

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "deploy": "gh-pages -d dist"
},

• 3 . 安裝 gh-pages 套件

npm install --save-dev gh-pages

• 4 .執行編譯與部署

npm run build

執行完後，你會看到專案目錄多了一個 dist 資料夾。

npm run deploy

看到 Published 字樣就代表成功了！

• 5 . 到 GitHub 開啟網頁功能

前往你的 GitHub Repository 網頁。

點擊上方選單的 Settings。

點擊左側欄的 Pages。

在 Build and deployment 下方的 Branch，確認選擇的是 gh-pages 分支，資料夾選擇 /(root)。

按下 Save。