ico.png
2.如上图所示，页面顶部的小图标会让页面显得高大上，一般把这种图标叫做favicon图标。利用vue-cli脚手架搭建的项目，如果不手动配置，页面中是不会显示favicon图标。
icoNull.png
3.favicon图标的配置也很简单，vue-cli默认帮我们安装了html-webpack-plugin（如果没有，可以自己npm安装---安装的命令--- npm install html-webpack-plugin --save-dev），我们只需在html-webpack-plugin插件中添加favicon选项即可。html-webpack-plugin插件需要配置两处，一处是在开发环境下配置，另一处是在打包后的环境下配置，如果只配置开发环境下的，没有配置打包后环境的，造成的结果就是，项目本地运行时会有favicon图标，打包后放在服务器上时发现没有favicon图标；反之亦然。详细配置如下
1、开发环境（开发调试时）配置：build--webpack.dev.conf.js这个文件配置
1.png
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon:'./static/favicon.ico',//路径写相对路径（一定放static下）
inject: true
}),
new FriendlyErrorsPlugin()
]
2、生产环境（打包后）配置：build---webpack.prod.conf.js
2.png
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon:'./static/favicon.ico',//路径写相对路径（一定放static下）
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
注意：1.配置favicon图标的路径是相对路径！！！
2.index.html 中不需要引入，只要webpack配置就好
如果重启看不到效果，建议换个浏览器试一下，我被chrome坑的很惨，一直缓存，连无痕模式也无法拯救
