vuepress打包之后頁(yè)面樣式丟失問(wèn)題的兩種解決方式
問(wèn)題描述
最近打算使用vuepress為公司項(xiàng)目集成一下前端開(kāi)發(fā)文檔，在打包的時(shí)候遇到了樣式丟失的問(wèn)題，在網(wǎng)絡(luò)上參考了一些解決方案，記錄一下自己遇到的問(wèn)題
1.集成打包之后，打開(kāi)入口文件展示頁(yè)面如下：
2.在本地直接運(yùn)行的頁(yè)面是沒(méi)有問(wè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的路由模式寫(xiě)的是history模式，所以解決方案主要是面向兩種不同模式（hash / history）
"vuepress": "^1.9.9" // 我安裝的時(shí)候最新版本是1.9.9，^符號(hào)表示每次install都升級(jí)到最新版本
方案一 hash模式
1.修改依賴(lài)文件更改路由模式：在依賴(lài)文件夾node_modules下找到@vuepress，打開(kāi)如圖所示的app.js文件夾，將文件夾中的mode:history注掉，使用默認(rèn)的hash模式
2.修改vuepress的config.js文件，主要更改的是base的這個(gè)配置項(xiàng)，base配置項(xiàng)在官網(wǎng)已經(jīng)說(shuō)得很明白了，可以去看一下，由于配置的默認(rèn)base是’/‘即根目錄，從根目錄直接讀取樣式文件自然是找不到的，所以在這里改成相對(duì)路徑’./’
module.exports = {
title: '開(kāi)發(fā)文檔',
description: '開(kāi)發(fā)文檔',
base: './', // 使用相對(duì)路徑，讀取相對(duì)路徑下的靜態(tài)文件
};
打包，本地訪問(wèn)入口文件，樣式?jīng)]有丟失的問(wèn)題，發(fā)布到服務(wù)器上樣式也正常，問(wèn)題解決。
方案二 history模式
考慮到在實(shí)際開(kāi)發(fā)中，多人維護(hù)文檔，每個(gè)人都去改vuepress的路由模式有點(diǎn)麻煩，所以只需要修改config.js文件的base配置項(xiàng)即可
module.exports = {
title: '開(kāi)發(fā)文檔',
description: '開(kāi)發(fā)文檔',
base: '/project-docs/', // project-docs可以隨意更改，主要看自己的文件放在服務(wù)器上的文件路徑
};
比如nginx配置的location如下， 那么我們通過(guò)服務(wù)端口去訪問(wèn)的時(shí)候，找的是根目錄html下的project-docs文件夾讀取對(duì)應(yīng)的靜態(tài)文件
location /project-docs {
root html;
index index.html index.htm;
}修改完成后直接進(jìn)行打包，在本地訪問(wèn)index.html還是會(huì)樣式丟失的，但是問(wèn)題不大，放上服務(wù)器后就可以正常訪問(wèn)了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中v-text / v-html使用實(shí)例代碼詳解
這篇文章主要介紹了vue中v-text / v-html使用實(shí)例代碼詳解,非常不錯(cuò)，代碼簡(jiǎn)單易懂，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue-cli3.0.4中webpack的dist路徑如何修改
這篇文章主要介紹了vue-cli3.0.4中webpack的dist路徑如何修改，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3頁(yè)面數(shù)據(jù)加載延遲的問(wèn)題分析和解決方法
在?Vue?3?的項(xiàng)目中,當(dāng)我們使用響應(yīng)式數(shù)據(jù)（如?ref?或?computed）來(lái)管理頁(yè)面狀態(tài)時(shí),可能會(huì)遇到由于接口數(shù)據(jù)加載延遲,導(dǎo)致頁(yè)面初始渲染時(shí)數(shù)據(jù)尚未獲取完成的問(wèn)題,本文針對(duì)此問(wèn)題簡(jiǎn)單分析了原因和解決方法,需要的朋友可以參考下2024-11-11
這篇文章主要為大家介紹了Vue中內(nèi)置指令與自定義指令語(yǔ)法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
rollup3.x+vue2打包組件的實(shí)現(xiàn)
本文主要介紹了rollup3.x+vue2打包組件的實(shí)現(xiàn)，詳細(xì)的介紹了打包會(huì)存在的問(wèn)題，包版本的問(wèn)題，babel 轉(zhuǎn)換jsx等問(wèn)題，具有一定的參考價(jià)值，感興趣的可以了解一下2023-03-03
Vue父組件向子組件傳值以及data和props的區(qū)別詳解
這篇文章主要介紹了Vue父組件向子組件傳值以及data和props的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue如何使用Promise.all()方法并行執(zhí)行多個(gè)請(qǐng)求
在Vue中,可以使用Promise.all()方法并行執(zhí)行多個(gè)異步請(qǐng)求,當(dāng)所有請(qǐng)求都成功返回時(shí),Promise.all()將返回一個(gè)包含所有請(qǐng)求結(jié)果的數(shù)組,如果其中任何一個(gè)請(qǐng)求失敗,則會(huì)觸發(fā)catch()方法并返回錯(cuò)誤信息,這種方式可以顯著提高程序的性能和響應(yīng)速度2025-01-01
這篇文章主要介紹了通過(guò)原生vue添加滾動(dòng)加載更多功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的方法
在Web開(kāi)發(fā)中經(jīng)常需要使用圖片,有時(shí)候需要對(duì)圖片進(jìn)行上傳,這篇文章主要給大家介紹了關(guān)于vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners)
這篇文章主要介紹了Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners),需要的朋友可以參考下2018-05-05