因为AI大模型是趋势，所以公司要做一个和AI聊天的页面，AI回复内容是markdown格式的文本，所以前端要用到 marked 依赖将markdown格式文本转为html格式
先说明一下，我们公司用的是jeecg-boot2，前端也是vue2
一、使用 marked
我参照此文章写的 marked 依赖相关代码
https://blog.csdn.net/lingxiyizhi_ljx/article/details/145543192
先引入3个依赖
npm install marked
npm install highlight.js
npm install marked-highlight
再定义一个方法，可实现AI回复markdown内容转html格式文本
/**
* AI回复markdown内容转html格式文本
* @param 消息文本
*/
markMessage(message) {
message = message.replaceAll('\\n','\n')
console.log('调用前' + message)
const marked = new Marked(
markedHighlight({
pedantic: false,
gfm: true, // 开启gfm
breaks: true,
smartLists: true,
xhtml: true,
async: false, // 如果是异步的，可以设置为 true
langPrefix: 'hljs language-', // 可选：用于给代码块添加前缀
emptyLangClass: 'no-lang', // 没有指定语言的代码块会添加这个类名
highlight: (code) => {
return hljs.highlightAuto(code).value
}
})
)
let markedMessage
// think标签不能参与marked
const thinkIndex1 = message.indexOf('<think>')
const thinkIndex2 = message.indexOf('</think>')
if (thinkIndex1 != -1 && thinkIndex2 != -1) {
let message1 = message.substring(thinkIndex1 + '<think>'.length, thinkIndex2)
let message2 = message.substring(thinkIndex2 + '</think>'.length)
markedMessage = '<think>' + marked.parse(message1) + '</think>'
if (message2) {
markedMessage += marked.parse(message2)
}
} else {
markedMessage = marked.parse(message)
}
console.log('调用后' + markedMessage)
return markedMessage
}
二、处理报错1
报错信息如下，原因是：node.js 18 不兼容oppsll，node.js v17以上版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:133:10)
at module.exports (D:\workspace\ai\rag_my_project\rag_my_front\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (D:\workspace\ai\rag_my_project\rag_my_front\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (D:\workspace\ai\rag_my_project\rag_my_front\node_modules\webpack\lib\NormalModule.js:471:10)
at D:\workspace\ai\rag_my_project\rag_my_front\node_modules\webpack\lib\NormalModule.js:503:5
at D:\workspace\ai\rag_my_project\rag_my_front\node_modules\webpack\lib\NormalModule.js:358:12
at D:\workspace\ai\rag_my_project\rag_my_front\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (D:\workspace\ai\rag_my_project\rag_my_front\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array.<anonymous> (D:\workspace\ai\rag_my_project\rag_my_front\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (D:\workspace\ai\rag_my_project\rag_my_front\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at D:\workspace\ai\rag_my_project\rag_my_front\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at D:\workspace\ai\rag_my_project\rag_my_front\node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
- 解决方式1
降低 node.js 版本至 16，就不会报该错误了 - 解决方式2
修改 package.json，在 scripts.serve 配置中添加 "SET NODE_OPTIONS=--openssl-legacy-provider && "
{
"name": "vue-antd-jeecg",
"version": "3.0.0",
"private": true,
"scripts": {
"pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build:test": "vue-cli-service build --mode test",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
......
}
二、处理报错2
报错信息如下，原因是：marked.umd.js 中有ES11的高级语法，编译不支持，所以报错。
error in ./node_modules/marked/lib/marked.umd.js
Module parse failed: Unexpected token (238:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| class _Tokenizer {
> options;
| rules; // set by the lexer
| lexer; // set by the lexer
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/modules/my/ai/chats/ChattingPage.vue?vue&type=script&lang=js& 129:0-32 314:23-29
@ ./src/views/modules/my/ai/chats/ChattingPage.vue?vue&type=script&lang=js&
@ ./src/views/modules/my/ai/chats/ChattingPage.vue
@ ./src sync ^\.\/.*\.vue$
@ ./src/utils/util.js
@ ./src/permission.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.2.72:3000/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
这个错误卡了我2天，网上哪些方法挨个试都没好使，也可能是使用方式不对，jeecg前端都没有 webpack.config.js 配置文件，因此解决问题后我第一时间记录一下，方便我也方便他人处理该报错，方法是东拼西凑自行尝试，如果有不对的地方可以指出让我修改
- 解决方式
首先引入 babel-loader
按网上某个文章所说，web-cli版本为4 则安装 babel-loader版本7
以此类推，我的 web-cli版本为5，所以要安装 babel-loader版本8
而 @babel/core 和 @babel/preset-env 依赖需要比 babel-loader 小一个版本，所以这两个依赖安装版本7
npm install --save-dev babel-loader@8 @babel/core@7 @babel/preset-env@7
- 然后修改 vue.config.js 配置文件，找到 config.module.rule('vxe').test(/.js$/) 的代码位置，这是jeecg写的兼容ES6的位置。
- 在 include 下面添加：.add(resolve('node_modules/marked'))
- 在 .loader('babel-loader') 下面添加：.options({ presets: ['@babel/preset-env'] })
// 编译vxe-table包里的es6代码，解决IE11兼容问题
config.module
.rule('vxe')
.test(/\.js$/)
.include
.add(resolve('node_modules/vxe-table'))
.add(resolve('node_modules/vxe-table-plugin-antd'))
.add(resolve('node_modules/marked'))
.end()
.use()
.loader('babel-loader')
.options({
presets: ['@babel/preset-env']
})
.end()
实测如此处理后，就可解决报错问题
