[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-在-github-page-上部署-vue-spa-時-vue-route-失效的問題":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},3705,"在-github-page-上部署-vue-spa-時-vue-route-失效的問題","在 github page 上部署 vue SPA 時 vue-route 失效的問題","在 github page 上部署 vue SPA 時 vue-route 失效的問題 參考資料: Vue R […]","\u003Ch1>在 github page 上部署 vue SPA 時 vue-route 失效的問題\u003C\u002Fh1>\n\u003Cp>參考資料:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F65501787\u002Fvue-router-github-pages-and-custom-domain-not-working-with-routed-links\">Vue Router, GitHub Pages, and Custom Domain Not Working With Routed Links\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fhuishun-medium-com.translate.goog\u002Fhow-to-deploy-a-vue-js-application-with-dynamic-routing-on-github-pages-3d36f4644e54?_x_tr_sl=en&_x_tr_tl=zh-TW&_x_tr_hl=zh-TW&_x_tr_pto=sc&_x_tr_hist=true\">如何在 GitHub 頁面上部署具有動態路由的 Vue.js 應用程式\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>跟上次部署在 AWS 的問題很類似=>\u003Ca href=\"https:\u002F\u002Fpost.billxu.net\u002Fblog\u002F2024\u002F03\u002F19\u002Faws-cloudfront-%e9%83%a8%e7%bd%b2%e9%9d%9c%e6%85%8b%e7%b6%b2%e7%ab%99%e5%87%ba%e7%8f%be-x-cache-error-from-cloudfront-%e8%a8%8a%e6%81%af\u002F\" title=\"AWS Cloudfront 部署靜態網站出現 X-cache: Error from cloudfront 訊息\">AWS Cloudfront 部署靜態網站出現 X-cache: Error from cloudfront 訊息\u003C\u002Fa>，當 vue 的 SPA 部署在 github page ，並且設定自訂網域，如果是用 vue-route ，例如\u003Cdomain>\u002Fpage，可能會出現後端辨識錯誤，當訪問 \u002Fpage 時依然會導向到 \u002F 。\u003Cbr \u002F>\n找了幾種做法，這個解決法最簡易直覺，分享一下。\u003C\u002Fp>\n\u003Ch2>硬導向\u003C\u002Fh2>\n\u003Cp>這做法就是在部署後產生的 index.html 直接重新導向自己，包含 404.html。\u003Cbr \u002F>\n我的理解是，當訪問 \u003Cdomain>\u002Fpage 時，因為辨識不到實際的 \u002Fpage 中 index.html ，因此會跳錯誤轉向到 404.html ，因此 404.html 中需要導回到原來的  index.html 。\u003Cbr \u002F>\n記得加上檔案 public\u002F404.html \u003C\u002Fp>\n\u003Cpre>\u003Ccode><!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8">\n    <title>CHANGE THIS TO YOUR TITLE<\u002Ftitle>\n    <script type="text\u002Fjavascript">\n      var pathSegmentsToKeep = 0;\n      var l = window.location;\n      l.replace(\n        l.protocol + '\u002F\u002F' + l.hostname + (l.port ? ':' + l.port : '') +\n        l.pathname.split('\u002F').slice(0, 1 + pathSegmentsToKeep).join('\u002F') + '\u002F?\u002F' +\n        l.pathname.slice(1).split('\u002F').slice(pathSegmentsToKeep).join('\u002F').replace(\u002F&\u002Fg, '~and~') +\n        (l.search ? '&' + l.search.slice(1).replace(\u002F&\u002Fg, '~and~') : '') +\n        l.hash\n      );\n\n    <\u002Fscript>\n  <\u002Fhead>\n  <body>\n  <\u002Fbody>\n<\u002Fhtml>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>index.html 則需要再加上自我轉址\u003C\u002Fp>\n\u003Cpre>\u003Ccode><script type="text\u002Fjavascript">\n\u002F\u002F MIT License\n\u002F\u002F https:\u002F\u002Fgithub.com\u002Frafgraph\u002Fspa-github-pages\n\u002F\u002F This script checks to see if a redirect is present in the query string,\n\u002F\u002F converts it back into the correct url and adds it to the\n\u002F\u002F browser's history using window.history.replaceState(...),\n\u002F\u002F which won't cause the browser to attempt to load the new url.\n\u002F\u002F When the single page app is loaded further down in this file,\n\u002F\u002F the correct url will be waiting in the browser's history for\n\u002F\u002F the single page app to route accordingly.\n(function(l) {\n    if (l.search[1] === '\u002F' ) {\n    var decoded = l.search.slice(1).split('&').map(function(s) { \n        return s.replace(\u002F~and~\u002Fg, '&')\n    }).join('?');\n    window.history.replaceState(null, null,\n        l.pathname.slice(0, -1) + decoded + l.hash\n    );\n    }\n}(window.location))\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>強制讓瀏覽器寫入原位置\u003Cbr \u002F>\n基本上就可以運作了，但由於這是取巧的做法，可能會影響 SEO ，使用時要考慮一下喔。\u003C\u002Fp>\n","2024-04-08T10:30:34","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F11%2F256px-Vue.js_Logo_2.svg_.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15],{"name":16,"slug":16},"vue","\u002Fblog\u002F在-github-page-上部署-vue-spa-時-vue-route-失效的問題",2]