如何阻止Vue.js CLI将SVG favicon代码自动包裹在[if IE]注释标签中

这个现象是Vue CLI内置的html处理逻辑导致的：内置的html-webpack-plugin及配套的favicon兼容处理模块，会自动对非PNG格式的favicon标签添加IE条件注释包裹，避免不支持SVG favicon的IE浏览器出现加载异常。

你可以根据自己的项目场景选择以下任意一种解决方案： #

方案一：关闭自动favicon处理（适合全自定义favicon配置的场景） #

在项目根目录新建/编辑vue.config.js文件，添加对应配置：

• 未使用PWA插件的项目配置：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      // 关闭框架自动处理favicon的逻辑
      args[0].favicon = false
      return args
    })
  }
})

• 安装了@vue/cli-plugin-pwa的项目，需要额外禁用PWA插件的SVG favicon注入逻辑：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  pwa: {
    iconPaths: {
      faviconSVG: null
    }
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].favicon = false
      return args
    })
  }
})

修改配置后重新执行构建即可生效。 #

方案二：局部跳过标签处理（适合仅需要保留单个自定义SVG favicon的场景） #

无需修改配置文件，直接编辑public/index.html文件，用ejs模板语法包裹你的SVG favicon标签，让插件跳过对这段内容的解析处理：

<%= '<link rel="icon" type="image/svg+xml" sizes="any" href="/img/icons/icon.svg">' %>

修改后重新执行构建，该标签会原样输出，不会被添加IE条件注释。

内容的提问来源于stack exchange，提问作者Cernokneznik