导航栏favicon图标的实现（二）——vue项目打包后favicon无法正常显示

问题：
在使用Vue开发中添加的favicon.ico无法显示，问题根源在于路径，如果使用http链接作为favicon地址一般不会出现问题，出现问题的基本都是在使用本地图片作为favicon。原因可能是由于打包的时候没有配置favicon选项或者favicon路径配置错误。

 

解决方法：

修改webpack配置文件

在webpack.dev.config.js 和 webpack.prod.config.js 中的  HtmlWebpackPlugin 插件选项中配置favicon选项，其中favicon的路径是个相对路径，代码如下：

（1）找到build下的webpack.dev.config.js文件

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon:"src/assets/favicon.ico"           //新增
    }),

（2）找到build下的webpack.prod.config.js文件

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

 

打包后根目录下就会有favicon.ico