favicon.ico正确显示

摘要: vue.js 2.0 favicon.ico正确显示

方法1 修改webpack配置

vue 中修改webpack配置使其正确显示, 版本如下

1
2
3
"vue": "^2.1.9",
"webpack": "^2.2.1",
"html-webpack-plugin": "^2.28.0"

修改文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
webpack.dev.conf.js
# div
let path = require('path') // 增加
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico') // 增加
}),
webpack.prod.conf.js
# prod
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico'), //新增
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
...
}),

以上代码 笔者通过测试, 可以正确展示favicon图标

方法2 修改index.html

测试没通过, 待有时间解决做个记录

1
2
3
4
5
<head>
<meta charset="utf-8">
...
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
</head>
评论