vue-cli创建的项目，vue.config.js按配置生成favicon

最近开发一个项目基于vue-element-admin进行开发的，它是vue-cli构建生成的项目，项目配置在vue.config.js文件里

根据需求favicon根据不同项目显示不同的icon，favicon默认配置在html文件中，每次手动改太麻烦，所以想在配置文件里统一配置favicon的值，每次只需要改一个配置文件就可以了。
下面介绍配置favicon的方法：

方法一：configureWebpack 修改配置项
调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象

const htmlWebpackPlugin = require("html-webpack-plugin");
  configureWebpack: {
    plugins: [
        new htmlWebpackPlugin({
            favicon:resolve('public/蓝胖子02.jpg'),
             templateParameters:()=> { /* omitted long function */ },
            template:resolve('public/index.html')
        })
    ]
  },

方法一，该对象将会被 webpack-merge 合并入最终的 webpack 配置。会直接覆盖默认的htmlWebpackPlugin 配置，会造成一些bug，不推荐这种方法

方法二：链式操作 (高级)
Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。
修改插件选项：

//settings.js
module.exports = {
	  title: 'Vue Element Admin',
	  titleIcon:'皮卡丘05.jpg',
}
//vue.config.js
const defaultSettings = require('./src/settings.js')
  chainWebpack(config) {
    config
        .plugin('html')
        .tap(args => {
            args[0].favicon = resolve('public/'+defaultSettings.titleIcon);
            return args
        })
 	}

注意：链式配置的要把模板文件:index.html里的link标签去掉，如下图