vue-cli3.0(@vue/cli)设置网站标题时找不到index.html问题解决_请确认您的项目模板是否支持vue3:根目录缺少 index.html

需求

使用Vue做课程设计，需要更改一下网站的题目和图标。
默认效果

想要实现的效果

背景颜色不同是由于上面的浏览器开了暗色模式。

问题

根据在网上查找，很容易得知对于标题只需要很简单的修改index.html里的一行代码即可。对于图标，除了需要修改index.html的代码，还需要在app.vue中添加几行代码。

但是index.html在哪里？网上的所有相关博客都说“在项目根目录中找到index.html，修改内容即可”。可是问题是，我的项目的根目录下根本就没有index.html标签。

项目根目录如图所示。其中的vue.config.js是由于项目需要手动创建的。

问题分析

在vue-cli更新到3.0版本（即@vue/cli）后，生成的项目框架的结构发生了极大改变。这也就是包括本文所说问题在内的大部分文件找不到问题的原因。

问题解决

查阅Vue Cli文档，在HTML与静态资源一节可以看到index.html被移入到了public目录下。

在public目录下，我们果然找到了index.html，在其中设置title就可以完成标题的修改。
对于图标的修改方法，网上博客比比皆是，这里粘贴一个最简单的。

参考资料

1. https://blog.csdn.net/qq_41638468/article/details/101025810

其他

• 在@vue/cli中，生成项目框架的结构发生了大幅度调整。比如vue.config.js变成了需要开发者手动添加。新入门的开发者很容易发现自己的项目和网上教程有明显差别又百度不到解释，可以优先考虑去Vue Cli的官网寻找相关内容。
• 本文设置的标题和图标都是全局性的，对于想要在不同界面设置不同标题和图标的需求，网上相关技术博客非常多，此处不再赘述。
• 关于index.html和App.vue的关系，网上相关解释非常多，此处不再赘述。