Vue3+Vite在index.html中使用环境变量

type

Post

status

Published

date

Nov 9, 2024

slug

vite-plugin-html

summary

基于插件vite-plugin-html

前言

网站配置了 Microsof Clarity ，通过 JS 和 Cookie 来录制、监测用户的网页活动，从而辅助查看活跃点击——好吧其实我就是拿来找 bug，笑~ 有次看热点地图时，偶然发现配置的站点工具把我本地的操作也全部录制下来了，然后我就用了笨方法——注释。开发时把相关脚本注释掉，打包后再把 index.html 里面的 JS 代码取消注释，因为代码都在 index.html 所以也还好，不是很麻烦。恰好这两天在看 env 环境，就想着能不能在 index.html 里面用，网上一搜，还真行，不过需要插件支持。遂有了这篇文章。写完之后发现之前用的公众号在线排版工具 md.aclickall 被劫持了，用不了，然后又花了半天找替代品，结果发现宝藏了，链接在文末。其实本来没打算啰里啰嗦的，但改着改着就越写越多了。

正文

1.安装插件

2.使用 Vite 框架的默认环境变量

(1).使用`process.env`判断

直接在index.html中使用ejs模版：

(2).注意事项

process.env是 Node.js 中的一个环境对象，vite 的 dev 脚本编译时默认就是development环境，而 build 脚本对应production环境，因此，当你使用process.env.NODE_ENV时，使用的是 Vite 框架为你配置的默认的环境变量。更详细的解释请看文末参考文章[3] 当我使用配置的自定义环境变量时，在这个 ejs 模板中读取不到，如下图中的process.env.VITE_NODE_ENV，故猜测只能使用process.env.默认的几个变量(如有谬误欢迎指正)。你可以在其他非 index.html 的 js 脚本中使用下列代码来查看 Vite 提供的默认变量：

示例图：

3.使用 Vite 框架的自定义环境变量

(1).设置环境变量

在项目根目录创建.env.production文件(生产环境)和.env.development文件(开发环境)，自定义环境变量的设置基于 Vite ,以VITE_命名起始,如下：

(2).配置编译脚本

当你使用VITE_NODE_ENV时，使用的是你自定义的环境变量，因此，你在开发和打包时都需要通过添加参数--mode.[环境名]指定环境，且该环境中必须包含你所使用的自定义环境变量，否则会出错。 --mode production中的 production 对应.env.production的命名，即--mode [环境名]对应.env.[环境名]，如下：

(3).对插件进行配置

先将 defineConfig 改写成箭头函数，再修改对应配置。

(4).在`index.html`中使用`ejs`模版

PS

我没有再测试 VUE 默认的或其他方式定义的环境变量，有兴趣可以自己尝试。有关vite-plugin-html插件的更详细的用法可以查看参考文章[1]。部分代码来自参考文章[2]，姑且算文字原创吧，如果不算我再取消原创声明。至于封面图，咱这种无人光顾的小店，总不能还去要授权声明吧——先道一声歉，侵删。尝试了一下新的公众号在线排版工具，感觉效果不错。以后就用这个了，抽空再本地部署一下，试了半天老是报错没部署好。文末有他的项目地址，在线使用请前往：https://md.bioitee.com

文章内容仅代表作者个人观点，如有错漏之处欢迎指出！如有更好的方案也欢迎分享！如有侵权请联系删除！

[1] 插件参考文章：

Vue3 在 index.html 使用环境变量——掘金@敲代码的小丸子: https://juejin.cn/post/7342055913427075106

[2] 插件参考文章：

插件【Vite】vite-plugin-html 插件详解——CSDN@Peter-Lu: https://blog.csdn.net/lph159/article/details/142431704

[3] 变量参考文章：

【Vite 环境变量】import.meta.env 和 loadEnv 使用和区别——CSDN@小五 Five: https://blog.csdn.net/weixin_42373175/article/details/131080666

[4] 公众号排版支持：

Markdown2Html: https://github.com/shenweiyan/Markdown2Html

前言

正文