[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-vite-部署在-github-page":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":17,"minRead":18},3650,"vite-部署在-github-page","Vite 部署在 github page","Vite 部署在 github page 請參考官方文件：https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fs […]","\u003Ch1>Vite 部署在 github page\u003C\u002Fh1>\n\u003Cp>請參考官方文件：\u003Ca href=\"https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fstatic-deploy\">https:\u002F\u002Fvitejs.dev\u002Fguide\u002Fstatic-deploy\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>一開始因為 vue route 設定問題，部署到github page 上時不知道什麼原因，vue文檔中的\u003Crouter-view>會無法正確顯示在 index.html 上，幾番折騰後發現Vite官方就有最新版本的部署方式，這邊就記錄一下。(2024年)\u003C\u002Fp>\n\u003Cp>首先是 vite.config.js 中的需要先設定基礎位置，如果是使用https:\u002F\u002F\u003CUSERNAME>.github.io\u002F遠矢的位置，那\u003Ccode>base\u003C\u002Fcode>要設定為\u003Ccode>'\u002F'\u003C\u002Fcode>。如果是 https:\u002F\u002F\u003CUSERNAME>.github.io\u002F\u003CREPO>\u002F 有個 REPO位置的話，則\u003Ccode>base\u003C\u002Fcode> 設定為\u003Ccode>'\u002F<REPO>\u002F'\u003C\u002Fcode>。\u003C\u002Fp>\n\u003Cp>再來 setting 的 page 那邊， source 須要設定為 GitHub Actions。並且使用以下 workflow 的 yml\u003C\u002Fp>\n\u003Cpre>\u003Ccode># Simple workflow for deploying static content to GitHub Pages\nname: Deploy static content to Pages\n\non:\n  # Runs on pushes targeting the default branch\n  push:\n    branches: ['main']\n\n  # Allows you to run this workflow manually from the Actions tab\n  workflow_dispatch:\n\n# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages\npermissions:\n  contents: read\n  pages: write\n  id-token: write\n\n# Allow one concurrent deployment\nconcurrency:\n  group: 'pages'\n  cancel-in-progress: true\n\njobs:\n  # Single deploy job since we're just deploying\n  deploy:\n    environment:\n      name: github-pages\n      url: ${{ steps.deployment.outputs.page_url }}\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions\u002Fcheckout@v4\n      - name: Set up Node\n        uses: actions\u002Fsetup-node@v3\n        with:\n          node-version: 18\n          cache: 'npm'\n      - name: Install dependencies\n        run: npm install\n      - name: Build\n        run: npm run build\n      - name: Setup Pages\n        uses: actions\u002Fconfigure-pages@v3\n      - name: Upload artifact\n        uses: actions\u002Fupload-pages-artifact@v2\n        with:\n          # Upload dist repository\n          path: '.\u002Fdist'\n      - name: Deploy to GitHub Pages\n        id: deployment\n        uses: actions\u002Fdeploy-pages@v2\u003C\u002Fcode>\u003C\u002Fpre>\n","2024-02-18T10:20:22","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2024%2F02%2F%E4%B8%8B%E8%BC%89.jpeg",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15],{"name":16,"slug":16},"vue","\u002Fblog\u002Fvite-部署在-github-page",1]