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标签去掉,如下图
vue-cli创建的项目,vue.config.js按配置生成favicon_第1张图片

你可能感兴趣的:(vue-cli创建的项目,vue.config.js按配置生成favicon)