- 需要解决的问题:采用的vue-cli框架,新人半路接到项目,原先title的图标已经删掉,需要重新添加一个title图标
网上的例子都是一些官方的什么替换啊,配置总之是对的,但是不是很全面。 - 解决方案
首先两个配置文件;
webpack.prod.conf.js 这个文件中:引入代码const path = require('path') ;下面是进行配置:
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
favicon: path.resolve('./logo.ico'),
inject: true,
}),
webpack.prod.dev.js这个文件中:引入代码:const path = require('path') ; 下面是进行配置:
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: path.resolve('./logo.ico'),
inject: true,
}),
最后很关键的index.html中的代码引入:<link rel="shortcut icon" type="image/x-icon" href="./logo.ico" rel="external nofollow" />
最后最最最关键的一点:图片的位置和图片的格式:
如果这张引入还不行的,可以试着这样再引入一张:
最后前端图片格式转换成ico格式的链接:比特虫转ico格式的网站
最后一点:更新完文件记得重启一下项目。