如何在index.html中访问VITE环境变量？

你当前的写法不符合Vite对index.html中环境变量的处理规则，所以无法获取到值，以下是问题分析和解决方法：

问题原因 #

• 直接使用VITE_MY_VAR：浏览器全局环境中不存在这个变量，Vite不会自动将环境变量挂载到全局window对象上
• 使用<% console.log(...) %>：这是EJS模板语法，Vite默认不对index.html启用EJS模板解析，这段代码会被当作普通文本处理，不会执行变量替换

正确步骤 #

1. 修正.env文件格式 #

.env中的变量值不需要添加引号（如果加了引号，引号会被当作变量值的一部分），修改为：

VITE_MY_VAR=HELLO WORLD

2. 在index.html中使用Vite的变量替换语法 #

Vite会自动将以VITE_开头的环境变量注入到index.html中，使用%变量名%的格式进行引用：

<script type="text/javascript">
   console.log('this is inside index.html');
   // 直接引用替换后的变量值
   console.log('my env var', '%VITE_MY_VAR%');
   
   // 或者赋值后使用
   const myEnvVar = '%VITE_MY_VAR%';
   console.log('assigned env var', myEnvVar);
</script>

3. 重启Vite开发服务 #

如果是在开发环境中修改了.env文件，需要重启Vite服务，确保新的环境变量被加载。

构建或运行项目后，%VITE_MY_VAR%会被替换为实际的HELLO WORLD，控制台就能正确打印出环境变量的值了。

内容的提问来源于stack exchange，提问作者Cookies