如何使用Gitee Pages服務搭建Vue專案

2022-10-26 14:01:17

1.背景

1.Gitee（GitHub） Pages 服務作為一個頁面容器，可以說是非常方便了。我們可以在上面免費部署前端專案。

2.並且同時獲得一個附帶.gitee.io（github.io）的網址。

3.其他優點就不再贅述，可自行百度。

具體可以看這個網址Gitee Pages官方介紹

點選專案導航欄中的服務 --> Gitee Pages

如果是靜態專案，此處不再說啥，直接構建，你的專案中有index.html(主入口)就可以

首先，根據官方指示

在專案路徑中新增.spa檔案

原理，我不是很清楚，應該是給Nginx做一個標識作用吧。

在構建前，一定要注意修改兩個地方

一、將build.js檔案中的console.log全部註釋

二、將config/index.js中的assetsPublicPath值改為./或圖中的英文指示改為你的專案名稱加/如： '/ltz/'

解決JS存取不到的問題。

注意，此處修改的assetsPublicPath為build物件中的！

三、開啟build/utils.js檔案（解決CSS/字型找不到問題）

在如下位置新增 publicPath: '../../'

在本地執行npm run build，得到`dist

上傳到你git倉庫中

--> Gitee Pages

選擇你的分支，如果只有一個分支，就選master

選擇部署目錄，本文中，build後的檔案全部都在dist目錄下，所以，填入dist。

如果，你發現，構建後，cssjsimg等檔案，報了404異常，請看本文第5步 -> 二三

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。