gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Signed-off-by: xiaomaiyun <923782299@qq.com>
pull/76/head
xiaomaiyun 2022-12-17 19:10:03 +00:00 committed by Gitee
parent 426ae0eb03
commit d053263f4b
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
snowy-admin-web/src/components/XnHighlightjs/index.vue
View File

@ -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,

4
snowy-admin-web/src/snowy.js
View File

@ -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)
// 全局代码错误捕捉 // 全局代码错误捕捉