umi4设置TDK及语义化

背景：

今天H5项目产品要增加 TDK，增加百度搜索引擎SEO友好性。但未接触过是TDK是什么意思。经过查阅TDK就是网站的标题（title）、描述（description）和关键词（keyword）。

项目：

1.因为使用的是react + umi4 + TS框架，umi4打包前是没有index.html文件的。开始的解决方案是build之后在dist/index.html手动添加。但是想了想应该有配置项。
2.后来仔细阅读的umi文档的API>配置，其中有两个配置想title、metas两个属性：


3.好了，“蔬菜佐料”（属性）都找到了，那我们就开始烹饪吧。首先我们在.umirc.ts或者config/config.ts两者2选1。我这里配置在config/config.ts文件里。


4.然后我们再 npm build打包后就得到dist/index.html文件就有了我们响应的内容；

感谢

umi官方文档
差不少的文章《vue设置TDK及语义化》

结语

希望本文章对有遇到同样问题的小伙伴有所帮助。
如有帮助，请小伙伴们动动小手关注、点赞、收藏。在这里万分感谢，么么哒。
如有出错，请指证。我是一个30+的前端程序猿黑臂麒麟。