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

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

本地測試完全可以

然而打包之后就徹底亂了

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

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

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

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

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

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

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

所以base改成

"base": "/blog/"

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

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

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

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

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

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

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

在config.js添加base，base中的路徑是你倉庫的名字

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

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

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

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

首先，在項(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 "倉庫地址" master
cd -

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

3、github.io無法打開怎么辦？

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

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

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

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