vuepress打包之后頁面樣式丟失問題的兩種解決方式
問題描述
最近打算使用vuepress為公司項(xiàng)目集成一下前端開發(fā)文檔,在打包的時(shí)候遇到了樣式丟失的問題,在網(wǎng)絡(luò)上參考了一些解決方案,記錄一下自己遇到的問題
1.集成打包之后,打開入口文件展示頁面如下:
2.在本地直接運(yùn)行的頁面是沒有問題的,
如圖,只是打包之后樣式丟失:
3.關(guān)于打包的dist文件目錄結(jié)構(gòu)如下:
dist │ 404.html │ index.html // 入口文件 │ ├─assets │ ├─css │ │ 0.styles.3294b3f2.css │ │ │ ├─img │ │ search.83621669.svg │ │ │ └─js │ 2.733019b2.js │ 3.b92b6444.js │ 4.fc333d27.js │ 5.d58e9858.js │ 6.2d0a63f8.js │ 7.9c9172a7.js │ 8.9e1014e2.js │ app.972414f3.js │ └─guide index.html
解決方案
解決方案有兩種,可以自行選擇,vuepress我安裝的版本如下,vuepress的路由模式寫的是history模式,所以解決方案主要是面向兩種不同模式(hash / history)
"vuepress": "^1.9.9" // 我安裝的時(shí)候最新版本是1.9.9,^符號(hào)表示每次install都升級(jí)到最新版本
方案一 hash模式
1.修改依賴文件更改路由模式:在依賴文件夾node_modules下找到@vuepress,打開如圖所示的app.js文件夾,將文件夾中的mode:history注掉,使用默認(rèn)的hash模式
2.修改vuepress的config.js文件,主要更改的是base的這個(gè)配置項(xiàng),base配置項(xiàng)在官網(wǎng)已經(jīng)說得很明白了,可以去看一下,由于配置的默認(rèn)base是’/‘即根目錄,從根目錄直接讀取樣式文件自然是找不到的,所以在這里改成相對(duì)路徑’./’
module.exports = { title: '開發(fā)文檔', description: '開發(fā)文檔', base: './', // 使用相對(duì)路徑,讀取相對(duì)路徑下的靜態(tài)文件 };
打包,本地訪問入口文件,樣式?jīng)]有丟失的問題,發(fā)布到服務(wù)器上樣式也正常,問題解決。
方案二 history模式
考慮到在實(shí)際開發(fā)中,多人維護(hù)文檔,每個(gè)人都去改vuepress的路由模式有點(diǎn)麻煩,所以只需要修改config.js文件的base配置項(xiàng)即可
module.exports = { title: '開發(fā)文檔', description: '開發(fā)文檔', base: '/project-docs/', // project-docs可以隨意更改,主要看自己的文件放在服務(wù)器上的文件路徑 };
比如nginx配置的location如下, 那么我們通過服務(wù)端口去訪問的時(shí)候,找的是根目錄html下的project-docs文件夾讀取對(duì)應(yīng)的靜態(tài)文件
location /project-docs { root html; index index.html index.htm; }
修改完成后直接進(jìn)行打包,在本地訪問index.html還是會(huì)樣式丟失的,但是問題不大,放上服務(wù)器后就可以正常訪問了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中使用vue2-perfect-scrollbar制作滾動(dòng)條
這篇文章主要介紹了Vue中使用vue2-perfect-scrollbar滾動(dòng)條,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06vue中使用file-saver導(dǎo)出文件的全過程記錄
這篇文章主要給大家介紹了關(guān)于vue中使用file-saver導(dǎo)出文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02el-form表單el-form-item驗(yàn)證規(guī)則里prop一次驗(yàn)證兩個(gè)或多個(gè)值問題
這篇文章主要介紹了el-form表單el-form-item驗(yàn)證規(guī)則里prop一次驗(yàn)證兩個(gè)或多個(gè)值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前)
這篇文章主要介紹了Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue父子組件傳值不能實(shí)時(shí)更新的解決方法
Vue是一個(gè)以數(shù)據(jù)驅(qū)動(dòng)、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值不能實(shí)時(shí)更新的解決方法,需要的朋友可以參考下2023-05-05elementui源碼學(xué)習(xí)仿寫一個(gè)el-tooltip示例
本篇文章記錄仿寫一個(gè)el-tooltip組件細(xì)節(jié),從而有助于大家更好理解餓了么ui對(duì)應(yīng)組件具體工作細(xì)節(jié),本文是elementui源碼學(xué)習(xí)仿寫系列的又一篇文章,后續(xù)空閑了會(huì)不斷更新并仿寫其他組件2023-07-07