背景:由以下代码知,Vue CLI创建的项目窗口的标题默认是打包后的项目名称,默认图标是Vue的图标favicon.ico。那么特定项目如何根据需要在窗口展示相应的项目标题和项目图标呢?
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
解决方法:
修改图标:直接将新图标导入public文件夹,然后将favicon.ico替换为新图标的名字即可,此处可以不用ico文件,但是为了规范,还是将图片转为ico文件更好
<link rel="icon" href="<%= BASE_URL %>darcy.ico">
修改标题:
- 法一:若项目名称需修改为“darcy练手项目”,那么直接在<title>标签中填入项目名称即可。
<title><darcy练手项目</title>
-
法二:修改vue.config.js文件
module.exports = { pages: { index: { template: 'public/index.html', entry: 'src/main.ts', filename: 'index.html', title:'darcy练手项目', } } }
参考:https://juejin.cn/post/6890422765724106765 https://juejin.cn/post/7098509207216848904文章来源:https://www.toymoban.com/news/detail-558251.html
与君共勉,请多多点赞收藏评论~文章来源地址https://www.toymoban.com/news/detail-558251.html
到了这里,关于如何更改vue项目窗口的标题title和图标icon的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!