Vue自定义网页icon

项目要求需要更具不同的环境自定义这个图标，查询资料解决问题之后特地记录下来

1 替换icon的代码，在mounted中调用

    updateIcon() {
      let link = document.querySelector("link[rel*='icon']") || document.createElement('link');
      link.rel = 'shortcut icon';
      link.type = 'image/x-icon';
      link.href = require('../assets/image/icon/' + configInfo.browserIcon);
      document.getElementsByTagName('head')[0].appendChild(link);
    },

2 这个方法不能使用.ico后缀的图片文件，会报错

 3 为了能处理.ico文件需要在vue.config.js配置

module.exports = // masterVueConfig(
  {
  // 你的vue cli配置
  publicPath: './',
  transpileDependencies: [],
  chainWebpack: config => {
    config.module
      .rule('image')
      .test(/\.ico$/)
      .use('url-loader')
      .loader('url-loader')
  }
}