关于 vue-cli3打包 makedown 文档报错

Question

更新了 vue-cli3脚手架，以前展示文档的项目打包报错

经过定位发现是只要有2个.md 文件中使用了<script>标签就会报错。。之前vue-cli2项目是没问题的。。

相关代码

配置文件。。
chainWebpack: config => {

    config.module
        .rule('md')
        .test(/\.md$/)
        .use('vue-loader')
        .loader('vue-loader')
        .end()
        .use('vue-markdown-loader')
        .loader('vue-markdown-loader/lib/markdown-compiler')
        .options({
            raw: true,
            use: [
                [require('markdown-it-anchor'), {
                    level: 2, // 添加超链接锚点的最小标题级别, 如: #标题 不会添加锚点
                    permalink: true, // 开启标题锚点功能
                    permalinkBefore: true // 在标题前创建锚点
                }],
                // 'markdown-it-container'的作用是自定义代码块

                [require('markdown-it-container'), 'demo', {
                    // 当我们写::: demo :::这样的语法时才会进入自定义渲染方法
                    validate: function (params) {
                        return params.trim().match(/^demo\s*(.*)$/)
                    },
                    // 自定义渲染方法,这里为核心代码
                    render: function (tokens, idx) {
                        var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/)
                        // nesting === 1表示标签开始
                        if (tokens[idx].nesting === 1) {
                            // 获取正则捕获组中的描述内容,即::: demo xxx中的xxx
                            var description = (m && m.length > 1) ? m[1] : ''
                            // 获得内容
                            var content = tokens[idx + 1].content
                            // 解析过滤解码生成html字符串
                            var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1')
                            // 获取script中的内容
                            var script = striptags.fetch(content, 'script')
                            // 获取style中的内容
                            var style = striptags.fetch(content, 'style')
                            // 组合成prop参数,准备传入组件
                            var jsfiddle = {html: html, script: script, style: style}
                            // 是否有描述需要渲染
                            var descriptionHTML = description
                                ? md.render(description)
                                : ''
                            // 将jsfiddle对象转换为字符串,并将特殊字符转为转义序列
                            jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle))
                            // 起始标签,写入demo-block模板开头,并传入参数
                            return `<code-show class="demo-box" :jsfiddle="${jsfiddle}">
                        <div class="source" slot="source">${html}</div>
                        ${descriptionHTML}
                        <div class="highlight" slot="highlight">`
                        }
                        // 否则闭合标签
                        return '</div></code-show>\n'
                    }
                }],
                [require('markdown-it-container'), 'tip'],
                [require('markdown-it-container'), 'warning']
            ],
            // 定义处理规则
            preprocess: function (MarkdownIt, source) {
                // 对于markdown中的table,
                MarkdownIt.renderer.rules.table_open = function () {
                    return '<table class="table">'
                }
                // 对于代码块去除v-pre,添加高亮样式
                MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence)
                return source
            }
        })

},

你期待的结果是什么？实际看到的错误信息又是什么？

有没有大神帮忙看一下是为什么。 找了一段时间也没找到原因

Answer 1

补充一下，开发环境是能正常显示的，并且能加载 <script>里面的 js，但是只要一打包就会报错。

Answer 2

vue.config.js 配置 parallel: false