代码之家 › 专栏 › 技术社区 › Cookies

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

vite reactjs html javascript

Cookies · 技术社区 · 1 年前

我正在尝试访问的内部的一些环境变量 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>

1 回复 | 直到 1 年前

Phil 1 年前

看见 HTML Env Replacement ...

Vite还支持替换HTML文件中的env变量。中的任何属性 import.meta.env 可以在HTML文件中使用 %ENV_NAME% 语法

笔记这需要Vite v4或更高版本

尝试在中使用此的问题 <script> 标签是引用和转义;Vite只执行直接替换操作。您需要尝试确保您的 .env 以JavaScript字符串文字表示时的值

<script>
  console.log('my env var', `%VITE_MY_VAR%`); // ð value must be quoted
                                              // as a string literal
</script>

这将作为

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

注意(我看到了很多 ), 不要终止您的 .env 带分号的值( ; ). 如果你这样做,这将包括在内 字面上 在值中。

你也不需要引号,如果你需要,它们无论如何都会被删除。

我建议尽可能简单

VITE_MY_VAR=Hello World

推荐文章

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

IvonaK · 使用Vite和React在Tauri应用程序中集成shadcn/ui和Tailwind CSS v4

5 月前

Unik6065 · 使用Vite在Laravel中覆盖默认顺风颜色的问题

5 月前

noblerare · Vite错误-未定义导出(SSR)

5 月前

opensas · SvelteKit:使用vitest时出现错误invite.config.js:“没有重载匹配此调用”

6 月前

dda · 如何避免在Vite的生产构建中在`{style:url(…)}}`中键入`base`路径

6 月前

The KNVB · 导航“到”是否支持二级转发?

6 月前

Mandroid · 无法从deck.gl/mapbox检测MapboxLayer

6 月前

Adam · 禁止访问错误:遵循Directus SDK教程

10 月前

Chris L · 使用Vite在单页上导入jQuery

10 月前