如何使用Gitee Pages服務(wù) 搭建Vue項(xiàng)目
1.背景
1.Gitee（GitHub） Pages 服務(wù)作為一個(gè)頁(yè)面容器，可以說是非常方便了。我們可以在上面免費(fèi)部署前端項(xiàng)目。
2.并且同時(shí)獲得一個(gè)附帶.gitee.io（github.io）的網(wǎng)址。
3.其他優(yōu)點(diǎn)就不再贅述，可自行百度。
2.Gitee Pages的介紹
具體可以看這個(gè)網(wǎng)址Gitee Pages官方介紹
3.上傳自己的項(xiàng)目到Gitee上。
點(diǎn)擊項(xiàng)目導(dǎo)航欄中的服務(wù) --> Gitee Pages
如果是靜態(tài)項(xiàng)目，此處不再說啥，直接構(gòu)建，你的項(xiàng)目中有index.html(主入口)就可以
4.如果你的是Vue項(xiàng)目(重點(diǎn)討論)
首先，根據(jù)官方指示
在項(xiàng)目路徑中添加.spa文件
原理，我不是很清楚，應(yīng)該是給Nginx做一個(gè)標(biāo)識(shí)作用吧。
5.本地`build
在構(gòu)建前，一定要注意修改兩個(gè)地方
一、將build.js文件中的console.log全部注釋
二、將config/index.js中的assetsPublicPath值改為./或圖中的英文指示改為你的項(xiàng)目名稱加/如： '/ltz/'
解決JS訪問不到的問題。
注意，此處修改的assetsPublicPath為build對(duì)象中的！
三、打開build/utils.js文件（解決CSS/字體找不到問題）
在如下位置添加 publicPath: '../../'
在本地運(yùn)行npm run build，得到`dist
`
7.將build得到的文件
上傳到你git倉(cāng)庫(kù)中
8.點(diǎn)擊項(xiàng)目導(dǎo)航欄中的服務(wù)
--> Gitee Pages
9.開始構(gòu)建
選擇你的分支，如果只有一個(gè)分支，就選master
選擇部署目錄，本文中，build后的文件全部都在dist目錄下，所以，填入dist。
如果，你發(fā)現(xiàn)，構(gòu)建后，css\js\img等文件，報(bào)了404異常，請(qǐng)看本文第5步 -> 二\三
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3.0 beta 版本已經(jīng)發(fā)布有一段時(shí)間了，今天這篇文章就帶大家體驗(yàn)一下，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
vue+element+oss實(shí)現(xiàn)前端分片上傳和斷點(diǎn)續(xù)傳
這篇文章主要介紹了vue+element+oss實(shí)現(xiàn)前端分片上傳和斷點(diǎn)續(xù)傳，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
本文給大家分享的是個(gè)人在使用vue.js制作的文章和評(píng)論的分頁(yè)組件，并使用webpack打包起來(lái)，這里推薦給大家，有需要的小伙伴可以參考下2016-06-06
使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能
這篇文章主要介紹了使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue3無(wú)法使用jsx的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue.config.js常用配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vscode下vue項(xiàng)目中eslint的使用方法
這篇文章主要給大家介紹了關(guān)于vscode下vue項(xiàng)目中eslint的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
Vue源碼探究之虛擬節(jié)點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼探究之虛擬節(jié)點(diǎn)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-04-04
vue項(xiàng)目中一定會(huì)用到的性能優(yōu)化技巧
這篇文章主要為大家介紹了vue項(xiàng)目中一定會(huì)用到的性能優(yōu)化技巧實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
稍微學(xué)一下Vue的數(shù)據(jù)響應(yīng)式（Vue2及Vue3區(qū)別）
這篇文章主要介紹了稍微學(xué)一下 Vue 的數(shù)據(jù)響應(yīng)式（Vue2 及 Vue3），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11