如何使用Gitee Pages服務(wù) 搭建Vue項(xiàng)目
1.背景
1.Gitee（GitHub） Pages 服務(wù)作為一個(gè)頁(yè)面容器，可以說(shuō)是非常方便了。我們可以在上面免費(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)目，此處不再說(shuō)啥，直接構(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訪問(wèn)不到的問(wèn)題。
注意，此處修改的assetsPublicPath為build對(duì)象中的！
三、打開(kāi)build/utils.js文件（解決CSS/字體找不到問(wèn)題）
在如下位置添加 publicPath: '../../'
在本地運(yùn)行npm run build，得到`dist
`
7.將build得到的文件
上傳到你git倉(cāng)庫(kù)中
8.點(diǎn)擊項(xiàng)目導(dǎo)航欄中的服務(wù)
--> Gitee Pages
9.開(kāi)始構(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)文章
這篇文章主要給大家介紹了關(guān)于Vue3中unref詳解與常見(jiàn)使用的相關(guān)資料,Vue3中的unref是一個(gè)實(shí)用工具,用于簡(jiǎn)化訪問(wèn)響應(yīng)式引用和普通值的過(guò)程,通過(guò)自動(dòng)判斷類(lèi)型,unref可以處理任何類(lèi)型的值,從而使代碼更加簡(jiǎn)潔和易讀,需要的朋友可以參考下2024-11-11
vue中使用 pako.js 解密 gzip加密字符串的方法
這篇文章主要介紹了vue項(xiàng)目中 使用 pako.js 解密 gzip加密字符串 的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Vue基于iview table展示圖片實(shí)現(xiàn)點(diǎn)擊放大
這篇文章主要介紹了Vue基于iview table展示圖片實(shí)現(xiàn)點(diǎn)擊放大,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
如今Vue3的勢(shì)頭正盛，在diff算法方面也做了相應(yīng)的變化，利用到了最長(zhǎng)遞增子序列把性能又提升了一個(gè)檔次。本文就來(lái)帶大家簡(jiǎn)單解刨一下Vue3中的diff算法2023-02-02
vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹(shù)型
本文主要介紹了vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹(shù)型，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了Vue filter介紹及詳細(xì)使用,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了vue.js初學(xué)入門(mén)教程第二篇,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要給大家介紹了關(guān)于v-model及其修飾符的相關(guān)資料,v-model指令有三個(gè)可以選用的修飾符：.lazy、.number以及.trim,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
main.js是項(xiàng)目的入口文件，項(xiàng)目中所有的頁(yè)面都會(huì)加載main.js，本文主要介紹了vue項(xiàng)目main.js配置及使用方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2023-05-05
Vuex是一個(gè)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue3中vuex與pinia踩坑的相關(guān)資料,需要的朋友可以參考下2021-12-12