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)題

由于我根目錄下加了其他東西所以沒有把打包后文件放在根目錄里而是放在根目錄的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í)候，由于沒有找到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ú)法打開怎么辦？

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

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

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論