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

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

本地測試完全可以

然而打包之后就徹底亂了

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

有點困擾，應該是打包配置的問題

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

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

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

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

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

所以base改成

"base": "/blog/"

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

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

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

vuepress個人博客部署遇到的一些問題

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

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

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

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

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

重新打包運行，問題解決。

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

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

首先，在項目中建立一個的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 -

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

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

開始的時候，github.io還是可以正常訪問的，當時過了幾天之后

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

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

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

最新評論