關(guān)于vuepress部署出現(xiàn)樣式的問(wèn)題及解決

更新時(shí)間：2022年09月19日 10:56:28 作者：我yi癲狂

這篇文章主要介紹了關(guān)于vuepress部署出現(xiàn)樣式的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vuepress部署出現(xiàn)樣式問(wèn)題

以前在安裝hexo的時(shí)候出了樣式問(wèn)題，現(xiàn)在用vuepress也出現(xiàn)了相同的問(wèn)題。

本地測(cè)試完全可以

然而打包之后就徹底亂了

即使是自己本地打包成dist之后也會(huì)出現(xiàn)相同的問(wèn)題

有點(diǎn)困擾，應(yīng)該是打包配置的問(wèn)題

通過(guò)修改index.html里的內(nèi)容。將/改為./

發(fā)現(xiàn)部分樣式恢復(fù)，可以推斷是打包的時(shí)候全部是絕對(duì)路徑，而本應(yīng)該是相對(duì)路徑

最后通過(guò)加群，問(wèn)群里的大佬，終于知道了問(wèn)題的關(guān)鍵的的確確是這個(gè)base的配置問(wèn)題

由于我根目錄下加了其他東西所以沒(méi)有把打包后文件放在根目錄里而是放在根目錄的blog文件夾下，所以base必須改

改成什么呢，就是你根目錄下的打包文件名，我這里是blog（網(wǎng)站根目錄下）

所以base改成

"base": "/blog/"

這樣就不會(huì)出現(xiàn)樣式問(wèn)題了

同理在網(wǎng)上的部署也是如此

（所以最好部署在根目錄下，這樣才省事，base就不用改了）

vuepress個(gè)人博客部署遇到的一些問(wèn)題

搭建vuepress比較簡(jiǎn)單，按vuepress官方網(wǎng)站一步步搭建就可以了，搭建過(guò)程比較順利，主要是在部署階段出現(xiàn)的一些問(wèn)題和大家分享一下

1、js和css出現(xiàn)404問(wèn)題

出現(xiàn)404的原因主要是部署到網(wǎng)絡(luò)環(huán)境的時(shí)候，由于沒(méi)有找到j(luò)s和css的根路徑，因此不管項(xiàng)目是否在【git賬號(hào)名】github.io的這倉(cāng)庫(kù)中，我們都需要在搭建vuepress時(shí)加上“base”，即根路徑。

在config.js添加base，base中的路徑是你倉(cāng)庫(kù)的名字

module.exports = {
    base:"/blog/",
    /*其他業(yè)務(wù)代碼*/
}

重新打包運(yùn)行，問(wèn)題解決。

2、每次都要重復(fù)操作打包、運(yùn)行、上傳github很麻煩怎么辦？

打包要npm，上傳github需要add、commit、push，那如果每次修改都要重復(fù)這幾個(gè)步驟，就會(huì)很麻煩，所以可以對(duì)著幾個(gè)操作步驟打包一下，做成一個(gè)自動(dòng)運(yùn)行的腳本，每次只要運(yùn)行這個(gè)腳本，就可以一次性執(zhí)行完打包、運(yùn)行、上傳github的動(dòng)作了。

首先，在項(xiàng)目中建立一個(gè)的shell腳本文件，即.sh后綴的文件

然后，把執(zhí)行命令放入腳本文件中

set -e
npm run build
cd docs/.vuepress/dist
 
git init
git add -A
git commit -m 'deploy'
 
git push -f "倉(cāng)庫(kù)地址" master
cd -

在命令行中運(yùn)行shell腳本sh deploy.sh，就可以自動(dòng)打包，上傳了

3、github.io無(wú)法打開(kāi)怎么辦？

開(kāi)始的時(shí)候，github.io還是可以正常訪問(wèn)的，當(dāng)時(shí)過(guò)了幾天之后

自己的手機(jī)和電腦就是打不開(kāi)，用有些人的手機(jī)和電腦就可以打開(kāi)，不知道是不是被屏蔽，到現(xiàn)在依然沒(méi)有解決這個(gè)問(wèn)題。

既然github打不開(kāi)，而且一時(shí)半會(huì)也找不到原因，那就換一種方法，那就是用碼云來(lái)代替github，其實(shí)碼云也挺方便的，直接把github中的項(xiàng)目導(dǎo)入進(jìn)來(lái)，然后開(kāi)啟gitee pages服務(wù)，碼云就可以自動(dòng)給我們把項(xiàng)目部署到網(wǎng)上。