Vue中引入highlight.js实现代码高亮，兼容IE

文章已阅读次

注意：以下三个方案中，方案一，方案二皆为不兼容IE【网站无法访问】的失败方案；方案三为兼容IE的可行方案；

【方案一】

根据highlight.js官网的介绍，我们在main.js文件中通过import的方式引入：

1
2
3

import hljs from "highlight.js";
import "highlight.js/styles/monokai-sublime.css";
Vue.use(hljs)

这里用到了富文本框WandEditor，引入高亮；

this.editor.highlight = hljs

以上测试环境和打包后在IE上都不兼容，其它浏览器正常运行；

尝试过使用Vue中兼容IE的用法：ranspileDependencies

在项目根目录与package.json同级创建：Vue.config.js文件【这个文件创建后项目会自动识别，无需特别引入】，代码如下。

module.exports = {
  transpileDependencies: [
    /[/\\]node_modules[/\\](.+?)?highlight.js/,
  ],
}

实测无效。

也试过从webpack下手，通过引入babel-profill

修改webpack.base.conf.js为以下内容

entry: {

    app: ['babel-polyfill', './src/main.js'],

  },

module>rules>include

include: [resolve(‘src’), resolve(‘test’), resolve(‘node_modules/webpack-dev-server/client’),resolve(‘node_modules/highlight.js’)]

完整文件：

'use strict'
var webpack = require("webpack")
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}



module.exports = {

  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery",
    })
  ],
  context: path.resolve(__dirname, '../'),
  // entry: {
  //   app: './src/main.js',
  // },
  entry: {
    app: ['babel-polyfill', './src/main.js'],
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' ?
      config.build.assetsPublicPath : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/highlight.js')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

亲测无效。
【方案二】

通过require的方式引入：

created() {
   this.kind = JSON.parse(sessionStorage.getItem("orderlist2"));
   if (!this.isie) {
     console.log("不是ie");
     this.hljs = require("highlight.js");
   } else {
     console.log("是ie");
   }
 },

原本想的是IE浏览器不引入js，发布信息在Chrome等高亮功能正常的浏览器上，这样IE浏览器也能正常访问；

这样在wangEditor配置信息中：

if (this.hljs != null) this.editor.highlight = this.hljs;

起初，以为这种方案在本地是可行的，因为IE浏览器能正常访问网站，Chrome浏览器也能使用代码高亮的功能；

但是一旦打包到线上就同“方案一”一样，不兼容IE；

查阅资料后得知：

require只能用在node里面，前端之所以能用，是因为我们引用了require.js插件来辅助；

require不是前端语法，打包的时候会被编译；

也就是说只要打包，就会编译对应的js模块。

方案二扑街。
【方案三】
在main.js中补充以下内容：

Vue.directive('highlight', function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block) => {
    hljs.highlightBlock(block)
  })
})

在从index.html中引入相应的js和css

1
2
3

<link href="http://apps.bdimg.com/libs/highlight.js/9.1.0/styles/default.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

以上css和js可以在IE中打开下载到本地，以静态资源引入更容易管控（避免官网网络影响）；

然后在需要代码高亮的地方绑定一个特性：v-highlight

这里由于我用到了wangEditor富文本框，所以实现方法如下：

<el-row
       ><el-col>
         <el-form-item label="博客内容" required>
           <el-row
             ><el-col> <div id="editor" v-highlight></div> </el-col
           ></el-row>
         </el-form-item> </el-col
     ></el-row>

同时，富文本框中的配置为：

this.editor.config.onchange = (html) => {        
       this.info_ = html; // 绑定当前逐渐地值
       this.$emit("change", html); // 将内容同步到父组件中
     };

【附录】

1.其它特性或样式用法参照官网；
2.这里方案三绑定了富文本框，输入源码后并不会里面呈现高亮效果，需要在其它文本框点击后才能触发；在IE中效果不会生效，但是从Chrome等其它浏览器生成高亮样式的文章后，从IE刷新是可以看到效果的，所以IE网站是可以正常访问浏览的。