在vue项目中使用avicon.ico

一般项目使用avicon.ico都是在index.html头部head中加入代码

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

vue项目中使用和上面的方法不同，需要配置webpack才能使avicon.ico生效，记录一下，以备后用。

webpack.dev.conf.js文件中修改

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

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
        ...
    })

修改以后需要重新启动项目npm run dev