访问index.html文件中的环境变量

Question

我正在尝试访问

index.html

文件内的一些环境变量。在构建index.html 时环境变量是否可以访问？我已经尝试过类似的操作，并且可以在控制台中打印出日志

index.html

<script type="text/javascript">
   console.log('this is inside index.html');
</script>

但是当我尝试访问环境变量时，我无法这样做。我在一些地方读到这是可能的，但我无法实现它。

.env 文件

VITE_MY_VAR = 'HELLO WORLD;

index.html

<script type="text/javascript">
   console.log('my env var', VITE_MY_VAR);
   <% console.log('test', process.env['VITE_MY_VAR']) %>
</script>

Answer 1

参见 HTML 环境替换...

Vite 还支持替换 HTML 文件中的环境变量。

import.meta.env

中的任何属性都可以在具有特殊

%ENV_NAME%

语法的 HTML 文件中使用

尝试在

<script>

标签中使用它的问题是引用和转义； Vite除了直接替换之外不执行任何其他操作。当呈现为 JavaScript 字符串文字时，您需要尝试确保

.env

值中没有未转义的引号字符

<script>
  console.log('my env var', `%VITE_MY_VAR%`);
</script>

这将直接注入为

<script>
  console.log('my env var', `'HELLO WORLD;`);
</script>