在項(xiàng)目根目錄下添加
.spa文件循衰，內(nèi)容為空意狠，主要是為了用于自動(dòng)切換 Nginx 的 404 配置乡恕，詳情嘶卧。修改
vue.config.js配置中的publicPath配置：
const BASE_URL = process.env.NODE_ENV === "production" ? "/yourProjName/" : "/";
module.exports = {
publicPath: BASE_URL,
}
解釋：當(dāng)變量 process.env.NODE_ENV 為生產(chǎn)環(huán)境時(shí)尔觉，將 BASE_URL 設(shè)置為項(xiàng)目名稱，這是因?yàn)槭褂?gitee pages 部署的應(yīng)用芥吟，默認(rèn)根路徑為 http://xxx.gitee.io/侦铜，如果不修改 publicPath 专甩，則你的應(yīng)用中的資源請(qǐng)求都將會(huì)從根路徑去找，結(jié)果就是出現(xiàn) 404钉稍，找不到你的資源涤躲，因?yàn)槟愕馁Y源都存放在 http://xxx.gitee.io/ 下面的項(xiàng)目目錄中，比如你在 gitee 上的項(xiàng)目名稱為 myblog贡未，那么上面代碼中的 "/yourProjName/" 就應(yīng)為 "/myblog/"种樱，如下：
const BASE_URL = process.env.NODE_ENV === "production" ? "/myblog/" : "/";
將項(xiàng)目中使用了
/開(kāi)頭的絕對(duì)路徑寫法去引用 public 靜態(tài)資源的URI改掉。如果是寫在 Html 部分<template>...</template>里面的俊卤，則可以直接將打頭的/去掉嫩挤，如<img src="/img/test.jpg" />改為<img src="img/test.jpg" />。如果寫在 Css 部分<style></style>里面的消恍，如background: url("/img/test.jpg")岂昭，那你還是把 public 里面對(duì)應(yīng)的資源挪到 asstes 下面吧……因?yàn)槲乙矝](méi)找到其他解決辦法 ε=(′ο｀*)))唉關(guān)閉 vue-router 的
history模式，如果你使用了vue-router并且啟用了history模式哺哼，打開(kāi)對(duì)應(yīng)的配置文件，關(guān)閉它叼风！因?yàn)槿绻闶褂昧?history模式取董，燃鵝，你只是一個(gè)前端靜態(tài)應(yīng)用无宿，部署在 gitee pages 服務(wù)上之后茵汰，沒(méi)有后端的支持，當(dāng)你打開(kāi)某個(gè)經(jīng)過(guò)路由的組件之后孽鸡，再刷新頁(yè)面蹂午，或者將當(dāng)前 URI 用新瀏覽器窗口打開(kāi)，┗|｀O′|┛ 嗷~~ 404 找不到這個(gè)頁(yè)面了１蚣睢６剐亍！沒(méi)有后端的支持巷疼，gitee pages 會(huì)將你的 URI 當(dāng)做真實(shí)的資源地址去請(qǐng)求資源晚胡，但實(shí)際這個(gè)地址只是前端路由之后的偽資源地址，sooooooooo修改
.gitignore文件嚼沿，注釋掉/dist估盘，因?yàn)槲覀冏罱K部署上去的應(yīng)用，就在這里面骡尽，所以我們必須將它上傳到 gitee
.DS_Store
node_modules
# /dist
...
biuld你的項(xiàng)目遣妥，執(zhí)行npm run biuld命令，編譯你的項(xiàng)目攀细，編譯完成之后箫踩，提交你的項(xiàng)目登錄你的 gitee 爱态，打開(kāi)你的項(xiàng)目版本庫(kù)頁(yè)面，在頁(yè)面頂部有一排選項(xiàng) [ </>代碼 | Issues | ... | DevOps | 服務(wù) | 管理 ]班套，點(diǎn)開(kāi)服務(wù)肢藐，第一個(gè)選項(xiàng)就是Gitee Pages，點(diǎn)它吱韭！之后打開(kāi)的頁(yè)面中 部署分支：根據(jù)自己的版本庫(kù)情況進(jìn)行選擇吆豹，部署目錄：填寫上面說(shuō)到的
dist，原因我就不說(shuō)了理盆。如果你一切順利痘煤，那么你應(yīng)該已經(jīng)部署成功了，在部署頁(yè)面上會(huì)顯示一行字：
已開(kāi)啟 Gitee Pages 服務(wù)猿规，網(wǎng)站地址： http://xxx.gitee.io/xxx衷快。那就恭喜啦！
【注意】第 3 步是根據(jù)我的項(xiàng)目情況進(jìn)行修改的姨俩，可能不適用于所有項(xiàng)目情況
純手工制作蘸拔，碼字不易，如果有幫到你环葵，點(diǎn)個(gè)贊再走唄
??
