vite打包index.html添加后端语言模板语言

业务环境

目前我司一个项目, 需要将网站的标题和图标进行自定义。如果是在项目启动时再去请求图标和标题的地址的话，那么就会存在一个闪动的情况。所以和后端人员一商量，就利用后台模板语言就行替换地址，那么项目启动之前图标地址就已经渲染在index.html上了

实现思路

如果需要在打包时进行index.html文件的修改的话，第一时间考虑到了vite-plugin-html这个插件，利用插件的环境变量进行替换，这样打包出来的index.html就已经填写好了模板语法了 vite-plugin-html文档地址： vite-plugin-html/README.zh_CN.md at main · vbenjs/vite-plugin-html (github.com)

实际操作

1. 安装vite-plugin-html： npm i vite-plugin-html -D
2. 在index.html文件中填写好环境变量:

1. 在vite.config.js填写:

总结

此次文章编写, 只是做一个小记录。 如果大手子们有其他更好的办法的话, 也可以说一下。