Vue的favicon设置，打包生产开发条件下均可

主要是模仿了vue-cli的方式，第一步，将favicon.ico放在static目录下，通过vue-cli 的拷贝插件copy-webpack-plugin，拷贝到打包文件里。第二步，修改打包前的index.html，在head里引入favicon.ico，如下，之后运行起来就可以看到了。

不用vue-cli的话，自己配置拷贝插件，接下来的步骤和上面一样。
1、配置copy-webpack-plugin

npm install --save-dev copy-webpack-plugin

在webpack.dev.config.js和webpack.prod.config.js都增加如下配置，我的是webpack4：

const CopyWebpackPlugin = require('copy-webpack-plugin')

plugins: [
  // 将一个目录的内容复制到另一个目录下
  new CopyWebpackPlugin({
    patterns: [
      { 
        from: path.join(__dirname,'../static'),
        to: 'static'   //相对output的publicPath路径 ，我这里是publicPath: '/'  
      }
    ]
  })
]

2、将favicon.ico放在static目录下

3、修改打包前的index.html

4、打包结果查看
favicon.ico存在于打包后的static中

生成的index.html中也包含了link

最后将dist中的文件，根据自己项目放到对应的位置中。运行起来就可以看到了。

最后吐槽一句，本来以为favicon是个小东西，没想到各种路径问题，或者开发环境可以，生产环境不行，使用了HtmlWebpackPlugin也不好使，难道是我姿势不对？但勤快的百度，坚持下去，问题总会解决的。仿佛听到下一个bug的召唤。

参考资料：
https://segmentfault.com/q/1010000010239649