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-06
vue中使用file-saver導(dǎo)出文件的全過程記錄
這篇文章主要給大家介紹了關(guān)于vue中使用file-saver導(dǎo)出文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
本篇文章主要介紹了vue-router 權(quán)限控制的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
el-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-05
Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前)
這篇文章主要介紹了Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
下面小編就為大家分享一篇解決Vue打包之后文件路徑出錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
目前前端最流行的網(wǎng)絡(luò)請(qǐng)求庫(kù)還是axios,所以對(duì)axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3中封裝Axios請(qǐng)求及在組件中使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue父子組件傳值不能實(shí)時(shí)更新的解決方法
Vue是一個(gè)以數(shù)據(jù)驅(qū)動(dòng)、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值不能實(shí)時(shí)更新的解決方法,需要的朋友可以參考下2023-05-05
elementui源碼學(xué)習(xí)仿寫一個(gè)el-tooltip示例
本篇文章記錄仿寫一個(gè)el-tooltip組件細(xì)節(jié)，從而有助于大家更好理解餓了么ui對(duì)應(yīng)組件具體工作細(xì)節(jié)，本文是elementui源碼學(xué)習(xí)仿寫系列的又一篇文章，后續(xù)空閑了會(huì)不斷更新并仿寫其他組件2023-07-07
這篇文章主要介紹了elementUi 中table表尾插入行的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07