阅读 3708

vue-cli3配置webpack,htmlWebpackPlugin

背景

项目上线后需要添加到百度搜索引擎,如何添加到百度搜索引擎参照https://jingyan.baidu.com/article/fc07f989c34dbb52ffe519a3.html。 重点是需要在html中添加一个meta,于是我就直接添加了

<meta name="baidu-site-verification" content="sxexxxxx" />
复制代码

然后问题出现了,在百度进行HTML验证的时候,出现错误

“不要做任何修改”emm,发现vue项目webpack打包会进行压缩html,去掉双引号空格等,于是百度验收就不能成功。

vue-cli3创建的项目修改webpack配置

所以就需要修改配置,让打包时保持百度验证meta的格式不变。 网上看了一圈都是cli2的配置,还是有一定的差别,配置vue-cli3项目,全部都在vue.config.js,下面给出cli3的配置。
官网提供configureWebpack和chainWebpack两种配置,因为我要在原来的基础上直接修改配置,所以用chainWebpack。 cli.vuejs.org/zh/guide/we…
看到官网的配置例子

问题来了,我需要的是配置plugin,这里配置的是loader,我怎么知道应该往config里写点什么呢?
重点来了

(1)控制台输入:vue inspect > output.js 拿到解析好的 webpack 配置。

(2)打开output.js

(3)比如,这里我是想要修改htmlWebpackPlugin的行为,于是在output.js中搜索htmlWebpackPlugin,output.js里有注释,自然会告诉你怎么写啦。

最终我的修改

module.exports = {
  chainWebpack: (config) => {
    // 为保证加入百度搜索引擎的meta格式,修改htmlWebpackPlugin的选项
    config.plugin('html').tap((options) => {
      // eslint-disable-next-line
      options[0].minify = {
        ...options[0].minify,
        ignoreCustomFragments: [/<meta name="baidu-site-verification" content="sxe4OW9kxm" \/>/],
      }
      // more options: https://github.com/jantimon/html-webpack-plugin#minification
      return options;
    });
  },
};
复制代码
文章分类
前端
文章标签