如何解决vuepress部署出现样式问题

以前在安装hexo的时候出了样式问题,现在用vuepress也出现了相同的问题。
本地测试完全可以
在这里插入图片描述

然而打包之后就彻底乱了
在这里插入图片描述

即使是自己本地打包成dist之后也会出现相同的问题
有点困扰,应该是打包配置的问题

在这里插入图片描述

通过修改index.html里的内容。将/改为./
在这里插入图片描述
发现部分样式恢复,可以推断是打包的时候全部是绝对路径,而本应该是相对路径

在这里插入图片描述

最后通过加群,问群里的大佬,终于知道了问题的关键的的确确是这个base的配置问题

由于我根目录下加了其他东西所以没有把打包后文件放在根目录里而是放在根目录的blog文件夹下,所以base必须改
改成什么呢,就是你根目录下的打包文件名,我这里是blog(网站根目录下)
在这里插入图片描述
所以base改成

"base": "/blog/"

在这里插入图片描述

这样就不会出现样式问题了
在这里插入图片描述

同理在网上的部署也是如此
(所以最好部署在根目录下,这样才省事,base就不用改了)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/322814.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

想使用Docker容器?先看看这些注意事项

Docker容器无疑是最近十年来最引人注目的技术之一,因为有了它,对我们思考设计、开发和运维软件的方式产生了非常有益的影响。 但是就像每一个开发工具一样,为了充分利用这些工具,需要注意一些使用中问题,Docker容器也是…

Vs Code如何自定义设置一键代码补全

有时候是不是看到别人输入一个vue就能打印整个代码,感觉很神奇,本文就以vue为案例教你如何使用这种骚操作!!! 点击文件->首选项->用户代码片段 输入vue.json(如果没有则新建代码片段) &…

Realm发布Realm .NET,扩展支持.NET技术栈

继去年夏天Realm引入对.NET Core的支持,使开发者可以用C#来构建移动应用之后,Realm发布了Realm .NET。Realm .NET是一个可以让开发者更好地集成他们的.NET技术栈的新组件集。 其中一个组件,是针对.NET的Global Notifier,可以实现大…

居中对齐

自绝父相 现在有一个父盒子和一个子盒子 要想让子盒子相对父盒子居中很简单,在子盒子上加上属性即可 margin: 0 auto;如果说要变成水平垂直居中呢,加上两个auto?结果肯定是不行的 得这样 用到所谓得子绝父相 首先父亲要相对定位 然后儿子设置成这样 l…

IdentityServer4(10)- 添加对外部认证的支持之QQ登录

前言 前面我们提到过IdentityServer4是可以添加外部认证的,如果外部认证支持OAuth2,那么添加到IdentityServer4是非常简单的,在ASP.NET Core下提供了非常多的外部认证实现,比如Google,Facebook,Twitter&…

springboot 多数据源mybatis的两种整合方法

转载自 springboot-mybatis多数据源的两种整合方法 简介: 随着并发量的不断增加,显然单个数据库已经承受不了高并发带来的压力。一个项目使用多个数据库(无论是主从复制- - 读写分离还是分布式数据库结构)的重要性变得越来越明显…

项目实战+感慨

已经好久没写博客了,自从接触了项目以后,发现很难再挤出时间来写博客,大部分时间都是在关注项目的进展,以及查阅相关的资料。我想这也是很多程序员入职以后就很少写博客的原因。 前言 最近一段时间我接触了很多前端的东西&#x…

解决mybatis generator无法覆盖XML

转载自 解决mybatis generator无法覆盖XML 今天发现mybatis generator maven plugin在重复生成的时候xml文件只会merge&#xff0c;不会覆盖。 明明在pom.xml中配置了如下&#xff1a; <configuration><configurationFile>src/main/resources/mybatis/generato…

中间件中渲染Razor视图

前言 上一篇文章《ASP.NET Core 奇技淫巧&#xff08;1&#xff09;&#xff1a;中间件实现服务端静态化缓存》中介绍了中间件的使用方法、以及使用中间件实现服务端静态化缓存的功能。本系列文章取名“奇技淫巧”不是没道理的&#xff0c;因为这写技巧都是我最近在做的公司实际…

解决idea启动项目报错:Unable to open debugger port(127.0.0.1:60157):java.net.SocketExceptionsocket closed

转载自 解决idea启动项目报错:Unable to open debugger port(127.0.0.1:60157):java.net.SocketException"socket closed 1.问题描述: 工作当中免不了要重启服务,debug模式下偶尔启动项目,却启动失败报错: Unable to open debugger port (127.0.0.1:60157): java.net.S…

下一个计划 : .NET/.NET Core应用性能管理

前言 最近几个月一直在研究开源的APM和监控方案&#xff0c;并对比使用了Zipkin,CAT,Sky-walking,PinPoint(仅对比,未实际部署),Elastic APM,TICK Stack,Prometheus等开源产品&#xff0c;其中不乏功能强大的监控和追踪系统&#xff0c;但它们都对.NET/.NET Core没有支持或支持…

架构演化:云原生时代开启之系列一演化篇

信息技术从出现伊始到渐成主流&#xff0c;其趋势经历了软件、开源和云三个阶段&#xff1a; 软件改变世界。纵观人类社会漫长的发展历程&#xff0c;农耕时代、工业时代与信息时代可谓是三个明显分水岭&#xff0c;每个时代人类涉及的领域范畴均喷井式增长。作为信息时代最重要…

laravel部署到服务器显示Permission denied

解决这个问题可以先cd到项目根目录中 依次输入以下两个命令 find storage -type d -exec chmod 777 {} \;find storage -type f -exec chmod 777 {} \;不报错就证明成功了

基于OIDC(OpenID Connect)的SSO

在[认证授权]系列博客中&#xff0c;分别对OAuth2和OIDC在理论概念方面进行了解释说明&#xff0c;其间虽然我有写过一个完整的示例&#xff08;https://github.com/linianhui/oidc.example&#xff09;&#xff0c;但是却没有在实践方面做出过解释。在这里新开一个系列博客&am…

Consul集群搭建

转载自 Consul集群搭建 概述 作为服务发现的几种产品&#xff0c;比较可以查看这里。Consul官方也提供了几种产品之间的比较&#xff0c;点击查看。 服务发现产品 Consul有很多组件&#xff0c;但总体来说&#xff0c;它是一个发现和配置服务工具&#xff0c;特性&#xff…

js遍历对象的key和value

如果想要得到数组的键值对&#xff0c;可以用以下方法 object {"name":"kejin","age":"18"}for(var index in object){console.log(index);console.log(object[index]); }

使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端

预备知识: 学习Identity Server 4的预备知识 第一部分: 使用Identity Server 4建立Authorization Server (1) 第二部分: 使用Identity Server 4建立Authorization Server (2) 第三部分: 使用Identity Server 4建立Authorization Server (3) 第四部分: 使用Identity Server 4建立…

SpringBoot整合kafka(实现producer和consumer)

转载自 SpringBoot整合kafka(实现producer和consumer) 在Windows环境下安装运行Kafka&#xff1a;https://www.jianshu.com/p/d64798e81f3b 本文代码使用的是Spring Boot 2.1.1.RELEASE 版本 <parent><groupId>org.springframework.boot</groupId><art…

ASP.NET Core 认证与授权[7]:动态授权

基于资源的授权 有些场景下&#xff0c;授权需要依赖于要访问的资源&#xff0c;例如&#xff1a;每个资源通常会有一个创建者属性&#xff0c;我们只允许该资源的创建者才可以对其进行编辑&#xff0c;删除等操作&#xff0c;这就无法通过[Authorize]特性来指定授权了。因为授…

H5的Websocket基本使用

前端代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head> &…