webpack 处理网页小图标favicon
问题现象:vue脚手架使用了HtmlWebpackPlugin插件打包index中的依赖,因此设置小图标的时候按原来的方法会出现问题在页面源文件index.html的标签之间插入<link rel="shortcut icon" href=" /favicon.ico" />仍然无法加载小图标解决方法:HtmlWebpackPlu
·
问题现象:
vue脚手架使用了HtmlWebpackPlugin插件打包index中的依赖,因此设置小图标的时候按原来的方法会出现问题
在页面源文件index.html的标签之间插入
<link rel="shortcut icon" href=" /favicon.ico" />
仍然无法加载小图标
解决方法:
HtmlWebpackPlugin插件中加入小图标
vue脚手架时修改webpack.dev.conf.js配置文件
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: './favicon.ico', // 添加小图标
inject: true
}),
不要忘记webpack.prod.conf.js中也需要添加哦
注:( favicon放入根目录(就是src同级的目录),favicon是以根目录为相对路径,而不是webpack.dev.conf.js配置文件为相对路径。)
修改完配置项后,重新npm run dev 刷新页面后小图标就出来了
更多推荐
已为社区贡献15条内容
所有评论(0)