在vue項目中使用favicon.ico

一般項目使用favicon.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