[bugfix]解决Vue使用highlight.js build打包发布后样式消失问题

Signed-off-by: xiaomaiyun <923782299@qq.com>
pull/77/head
xiaomaiyun 2 years ago committed by Gitee
parent 426ae0eb03
commit d053263f4b
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F

@ -1,7 +1,7 @@
<template> <template>
<!-- 本组件这兄弟写的很好 请参照https://blog.csdn.net/weixin_41897680/article/details/124925222--> <!-- 本组件这兄弟写的很好 请参照https://blog.csdn.net/weixin_41897680/article/details/124925222-->
<div class="hljs-container" :codetype="props.language"> <div class="hljs-container" :codetype="props.language">
<highlightjs :language="props.language" :autodetect="false" :code="props.code"></highlightjs> <highlightjs :language="props.language" :autodetect="!props.language" :code="props.code"></highlightjs>
</div> </div>
</template> </template>
@ -13,7 +13,7 @@
const props = defineProps({ const props = defineProps({
language: { language: {
type: String, type: String,
default: () => 'JavaScript' default: () => undefined
}, },
code: { code: {
type: String, type: String,

@ -5,7 +5,7 @@ import { hasPerm } from './utils/permission/index'
import errorHandler from './utils/errorHandler' import errorHandler from './utils/errorHandler'
import customIcons from './assets/icons/index.js' import customIcons from './assets/icons/index.js'
import 'highlight.js/styles/atom-one-dark.css' import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common' import hljsCommon from 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin' import hljsVuePlugin from '@highlightjs/vue-plugin'
import STable from './components/Table/index.vue' import STable from './components/Table/index.vue'
import Ellipsis from './components/Ellipsis/index.vue' import Ellipsis from './components/Ellipsis/index.vue'
@ -28,6 +28,8 @@ export default {
// 统一注册自定义全局图标 // 统一注册自定义全局图标
app.use(customIcons) app.use(customIcons)
// 注册代码高亮组件 博客https://blog.csdn.net/weixin_41897680/article/details/124925222 // 注册代码高亮组件 博客https://blog.csdn.net/weixin_41897680/article/details/124925222
// 注意解决Vue使用highlight.js build打包发布后样式消失问题原因是webpack在打包的时候没有把未被使用的代码打包进去因此在此处引用一下看似无意义实则有用
hljsCommon.highlightAuto('<h1>Highlight.js has been registered successfully!</h1>').value
app.use(hljsVuePlugin) app.use(hljsVuePlugin)
// 全局代码错误捕捉 // 全局代码错误捕捉

Loading…
Cancel
Save