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