vue使用marked解析markdown本地正常，打包部署到服务器后样式乱了
在自己的本地（localhost:8080）是正常的，如下图：
部署到服务器后，就都变成一个h1标签了，如下图：
有人知道这是为什么吗？
按F12查看一下样式，调试一下，这样看不出问题
可能样式没打包进去
markdown 语法写错了 比如少换行或者少空格
<template>
<div class="versSion">
<div class="verSion-body">
<div class="menu">
<ul class="menu-list">
<li
v-for="(nav, index) in navList"
:key="index"
:class="{ on: activeIndex === index }"
@click="currentClick(index)"
>
<a href="javascript:;" @click="pageJump(nav.index)" class="title">{{
nav.title
}}</a>
<div v-if="nav.children.length > 0" class="menu-children-list">
<el-tree
ref="selectTree"
:data="navList"
:props="defaultProps"
:node-key="defaultProps.value"
@node-click="handleNodeClick"
default-expand-all
></el-tree>
</div>
</li>
</ul>
</div>
<article
class="help-center-content markdown-body"
v-html="compiledMarkdown"
ref="helpDocs"
@scroll="docsScroll"
></article>
</div>
</div>
</template>
<script>
import marked from 'marked';
import hljs from 'highlight.js'
import 'highlight.js/styles/magula.css';
// import dvmV220 from '@/assets/md/help/dvm_v.text'
let rendererMD = new marked.Renderer();
marked.setOptions({
renderer: rendererMD,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
highlight: function(code) {
return hljs.highlightAuto(code).value;
}
});
export default {
props: ['mdContent'],
props: {
defaultProps: {
type: Object,
default: () => {
return {
value: "index", // ID字段名
label: "title", // 显示名称
children: "children", // 子级字段名
};
},
},
},
data () {
return {
content: '',
navList: [],
activeIndex: 0,
docsFirstLevels: [],
docsSecondLevels: [],
childrenActiveIndex: 0
}
},
beforeRouteEnter(to, from, next) {
const templateId = to.query.templateId;
next((vm) => {
vm.init(templateId)
});
},
mounted () {},
methods: {
init (templateId) {
this.content = require(`@/assets/md/SupermarketMd/${templateId}.text`)
this.navList = this.handleNavTree();
this.getDocsFirstLevels(0);
},
handleNodeClick(data){
this.titleClickScroll = true;
this.$refs.helpDocs.scrollTop = this.$el.querySelector(`#data-${data.index}`).offsetTop - 45;
setTimeout(() => this.titleClickScroll = false, 100);
},
childrenCurrentClick (index) {
// this.childrenActiveIndex = index
},
getDocsFirstLevels (times) {
// 解决图片加载会影响高度问题
setTimeout(() => {
let firstLevels = [];
Array.from(document.querySelectorAll('h1'), element => {
firstLevels.push(element.offsetTop - 60)
})
this.docsFirstLevels = firstLevels;
if (times < 8) {
this.getDocsFirstLevels(times + 1);
}
}, 500);
},
getDocsSecondLevels (parentActiveIndex) {
let idx = parentActiveIndex;
let secondLevels = [];
let navChildren = this.navList[idx].children
if (navChildren.length > 0) {
secondLevels = navChildren.map((item) => {
return this.$el.querySelector(`#data-${item.index}`).offsetTop - 60
})
this.docsSecondLevels = secondLevels;
}
},
docsScroll () {
if (this.titleClickScroll) {
return;
}
let scrollTop = this.$refs.helpDocs.scrollTop
let firstLevelIndex = this.getLevelActiveIndex(scrollTop, this.docsFirstLevels)
this.currentClick(firstLevelIndex)
let secondLevelIndex = this.getLevelActiveIndex(scrollTop, this.docsSecondLevels)
this.childrenCurrentClick(secondLevelIndex)
},
getLevelActiveIndex (scrollTop, docsLevels) {
let currentIdx = null;
let nowActive = docsLevels.some((currentValue, index) => {
if (currentValue >= scrollTop) {
currentIdx = index
return true
}
})
currentIdx = currentIdx - 1
if (nowActive && currentIdx === -1) {
currentIdx = 0
} else if (!nowActive && currentIdx === -1) {
currentIdx = docsLevels.length - 1
}
return currentIdx
},
pageJump (id) {
// console.log('id', id, this.$el.querySelector(`#data-${id}`).offsetTop)
this.titleClickScroll = true;
this.$refs.helpDocs.scrollTop = this.$el.querySelector(`#data-${id}`).offsetTop - 45;
setTimeout(() => this.titleClickScroll = false, 100);
},
currentClick (index) {
this.activeIndex = index
this.getDocsSecondLevels(index)
},
getTitle (content) {
let nav = [];
let tempArr = [];
// /[^\n\s](#+)[^#][^\n]*?(?:\n)/g
content.replace(/(#+)[^#][^\n]*?(?:\n)/g, function(match, m1, m2) {
let title = match.replace('\n', '');
let level = m1.length;
tempArr.push({
title: title.replace(/^#+/, '').replace(/\([^)]*?\)/, ''),
level: level,
children: [],
});
});
// 只处理一级二级标题，以及添加与id对应的index值
// nav = tempArr.filter(item => item.level <= 2);
nav = tempArr
// console.log('nav1', nav)
let index = 0;
nav = nav.map(item => {
item.index = index++;
return item;
});
// console.log('nav', nav)
return nav
},
// 将一级二级标题数据处理成树结构
handleNavTree () {
let navs = this.getTitle(this.content)
let navLevel = [1, 2, 3, 4];
let retNavs = [];
let toAppendNavList;
// console.log('navs', navs)
navLevel.forEach(level => {
// 遍历一级二级标题，将同一级的标题组成新数组
toAppendNavList = this.find(navs, {
level: level
});
if (retNavs.length === 0) {
// 处理一级标题
retNavs = retNavs.concat(toAppendNavList);
} else {
// 处理二级标题，并将二级标题添加到对应的父级标题的children中
toAppendNavList.forEach(item => {
item = Object.assign(item);
let parentNavIndex = this.getParentIndex(navs, item.index);
return this.appendToParentNav(retNavs, parentNavIndex, item);
});
}
});
return retNavs;
},
find (arr, condition) {
return arr.filter(item => {
for (let key in condition) {
if (condition.hasOwnProperty(key) && condition[key] !== item[key]) {
return false;
}
}
return true;
});
},
getParentIndex (nav, endIndex) {
for (var i = endIndex - 1; i >= 0; i--) {
if (nav[endIndex].level > nav[i].level) {
return nav[i].index;
}
}
},
appendToParentNav (nav, parentIndex, newNav) {
let index = this.findIndex(nav, {
index: parentIndex
});
if (index >= 0) {
nav[index].children = nav[index].children.concat(newNav);
}
},
findIndex (arr, condition) {
let ret = -1;
arr.forEach((item, index) => {
for (var key in condition) {
if (condition.hasOwnProperty(key) && condition[key] !== item[key]) {
return false;
}
}
ret = index;
});
return ret;
},
},
computed: {
// content () {
// console.log(`@/assets/md/help/${this.$route.params.name}.text`,require(`@/assets/md/help/${this.$route.params.name}.text`))
// return require(`@/assets/md/help/${this.$route.params.name}.text`)
// },
compiledMarkdown: function() {
let index = 0;
rendererMD.heading = function(text, level) {
if (level <= 3) {
return `<h${level} id="data-${index++}">${text}</h${level}>`;
} else {
return `<h${level}>${text}</h${level}>`;
}
};
rendererMD.image = function(src) {
src = src.replace('..', '')
src = require('@/assets/md' + src)
return `<img src="${src}" alt/>`;
};
// rendererMD.code = function(code, language) {
// console.log('代码信息',code)
// code = code.replace(/\r\n/g, "<br>")
// code = code.replace(/\n/g, "<br>");
// return `<p>${code}</p>`;
// };
return marked(this.content);
}
},
watch: {
'$route.params.name' () {
this.$refs.helpDocs.scrollTop = 0
this.init()
}
}
}
</script>
<style scoped>
*::-webkit-scrollbar-thumb{
background-color:transparent;
}
.el-tree{
background-color: transparent;
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/_themeify.scss";
.versSion {
height: 100%;
text-align: left;
@include text-color("text-color-menu");
background-color: #ffffff;
img {
@include box-shadow(0px 6px 16px 2px, "login-page-shadow-color");
}
.verSion-body {
height: calc(100% - 45px);
display: flex;
.menu {
width: 270px;
font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif;
overflow-y: auto;
background-color: #F7F7F7;
margin-left: 10%;
margin-top: 2%;
height: 50%;
ul {
padding-left: 20px;
}
.menu-list {
list-style: none;
li {
list-style: none;
margin: 6px 0;
.title{
color: rgba(16, 16, 16, 100);
font-size: 18px;
text-align: left;
font-family: "SourceHanSansSC-bold";
font-weight: bolder;
}
}
a {
// color: #364149;
@include text-color("text-color-menu");
font-size: 15px;
line-height: 30px;
}
li a:hover {
text-decoration: underline;
}
}
}
.markdown-body {
width:50%;
padding: 0 80px;
overflow: auto;
padding-top: 2%;
// background-color: antiquewhite;
@include text-color("text-color-mian");
h1{
padding: 0!important;
border:none!important;
}
}
}
}
</style>
您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632
非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！
速戳参与调研>>>https://t.csdnimg.cn/Kf0y