vue项目配置favicon.ico

一枚前端小姐姐

2021-01-06 1,250 阅读1分钟

1、favicon.ico放在根目录下

2、在index.html头部head中引入

<head>
    <meta charset="utf-8">
    <link rel="icon" href="favicon.ico" type="image/x-icon" />   //引入
    <title>VUE</title>
</head>

3、在webpack.dev.conf.js中配置

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: path.resolve('favicon.ico'),   //增加
 }),

4、在webpack.prod.conf.js中配置

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      favicon: path.resolve('favicon.ico'),   //增加
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
}),