background

Need to add to the baidu search engine after project launch, how to add to the baidu search engine reference https://jingyan.baidu.com/article/fc07f989c34dbb52ffe519a3.html. The point was to add a meta to the HTML, so I just added it

<meta name="baidu-site-verification" content="sxexxxxx" />
Copy the code

Then the problem appeared, in Baidu HTML verification, error

“Do not make any modifications” EMM found that webpack of vue project would compress HTML, remove double quotation marks and Spaces, etc., so Baidu’s acceptance could not be successful.

Vue-cli3 created the project to modify the WebPack configuration

Therefore, we need to modify the configuration to keep the format of Baidu validation meta unchanged when packaging. The configuration of VUE-CLI3 project is all in vue.config.js. The configuration of CLI3 is given below. The official website provides two configurations: configureWebpack and chainWebpack. Because I need to modify the configuration directly on the original basis, I use chainWebpack. Cli.vuejs.org/zh/guide/we… See the configuration examples on the official website

The problem is, I need to configure plugin, here configure loader, how do I know what to write in config? The key to the

(1) Console input: vue inspect > output.js to get the parsed webpack configuration.

(2) Open output.js

For example, if I want to modify the behavior of htmlWebpackPlugin, I will search for htmlWebpackPlugin in output.js.

Finally I modify

Module. exports = {chainWebpack: (config) => {// To ensure the inclusion of Meta format of Baidu search engine, modify htmlWebpackPlugin option 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
      returnoptions; }); }};Copy the code