vuepress打包之后页面样式丢失问题的两种解决方式
问题描述
最近打算使用vuepress为公司项目集成一下前端开发文档，在打包的时候遇到了样式丢失的问题，在网络上参考了一些解决方案，记录一下自己遇到的问题
1.集成打包之后，打开入口文件展示页面如下：
2.在本地直接运行的页面是没有问题的，
如图，只是打包之后样式丢失：
3.关于打包的dist文件目录结构如下：
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" // 我安装的时候最新版本是1.9.9，^符号表示每次install都升级到最新版本
方案一 hash模式
1.修改依赖文件更改路由模式：在依赖文件夹node_modules下找到@vuepress，打开如图所示的app.js文件夹，将文件夹中的mode:history注掉，使用默认的hash模式
2.修改vuepress的config.js文件，主要更改的是base的这个配置项，base配置项在官网已经说得很明白了，可以去看一下，由于配置的默认base是’/‘即根目录，从根目录直接读取样式文件自然是找不到的，所以在这里改成相对路径’./’
module.exports = {
title: '开发文档',
description: '开发文档',
base: './', // 使用相对路径，读取相对路径下的静态文件
};
打包，本地访问入口文件，样式没有丢失的问题，发布到服务器上样式也正常，问题解决。
方案二 history模式
考虑到在实际开发中，多人维护文档，每个人都去改vuepress的路由模式有点麻烦，所以只需要修改config.js文件的base配置项即可
module.exports = {
title: '开发文档',
description: '开发文档',
base: '/project-docs/', // project-docs可以随意更改，主要看自己的文件放在服务器上的文件路径
};
比如nginx配置的location如下， 那么我们通过服务端口去访问的时候，找的是根目录html下的project-docs文件夹读取对应的静态文件
location /project-docs {
root html;
index index.html index.htm;
}修改完成后直接进行打包，在本地访问index.html还是会样式丢失的，但是问题不大，放上服务器后就可以正常访问了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中v-text / v-html使用实例代码详解,非常不错，代码简单易懂，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
vue-cli3.0.4中webpack的dist路径如何修改
这篇文章主要介绍了vue-cli3.0.4中webpack的dist路径如何修改，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在 Vue 3 的项目中,当我们使用响应式数据（如 ref 或 computed）来管理页面状态时,可能会遇到由于接口数据加载延迟,导致页面初始渲染时数据尚未获取完成的问题,本文针对此问题简单分析了原因和解决方法,需要的朋友可以参考下2024-11-11
这篇文章主要为大家介绍了Vue中内置指令与自定义指令语法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
本文主要介绍了rollup3.x+vue2打包组件的实现，详细的介绍了打包会存在的问题，包版本的问题，babel 转换jsx等问题，具有一定的参考价值，感兴趣的可以了解一下2023-03-03
这篇文章主要介绍了Vue父组件向子组件传值以及data和props的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
Vue如何使用Promise.all()方法并行执行多个请求
在Vue中,可以使用Promise.all()方法并行执行多个异步请求,当所有请求都成功返回时,Promise.all()将返回一个包含所有请求结果的数组,如果其中任何一个请求失败,则会触发catch()方法并返回错误信息,这种方式可以显著提高程序的性能和响应速度2025-01-01
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
vue2+element-ui+nodejs实现图片上传和修改图片到数据库的方法
在Web开发中经常需要使用图片,有时候需要对图片进行上传,这篇文章主要给大家介绍了关于vue2+element-ui+nodejs实现图片上传和修改图片到数据库的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
这篇文章主要介绍了Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners),需要的朋友可以参考下2018-05-05
最新评论