如何在Svelte @ index.html中使用环境变量



我想在svelte-kit项目中使用环境变量,但不幸的是我不能。

I have try to:

app.html

<meta name="TESTING" value="%VITE_GOOGLE_TAG%">
<meta name="TESTING" value="<% VITE_GOOGLE_TAG %>">
<meta name="TESTING" value="<% process.env.VITE_GOOGLE_TAG %>">

在我的.env中,我定义了变量:

VITE_GOOGLE_TAG=xxxxx

但是当我重新启动服务器时,替换不会发生。

我希望每个环境都有不同的Google tag manager id。就像

staging -> xxxxx
production -> yyyyy

如何在app.html中访问svelte-kit中的环境变量?

文档描述了通过使用<svelte:head><meta>标签添加到<head>。如果你想让<meta>标签出现在所有页面上,最好将它添加到一个通用的布局文件中(例如,src/routes/__layout.svelte)。

您可以通过import.meta.env.VARNAME访问环境变量。你可以用Svelte的属性绑定语法(即,用花括号括起来的表达式)将它绑定到<meta>.value

<!-- src/routes/__layout.svelte -->
<svelte:head>
<meta name="TESTING" value={import.meta.env.VITE_GOOGLE_TAG}>
</svelte:head>

演示

最新更新