提问人：Jay0813 提问时间：11/24/2022 更新时间：11/26/2022 访问量：939
如何在index.html中使用环境变量和 svelte.js（vite）
How to use environment variable in index.html with svelte.js(vite)
问：
如何在index.html中使用环境变量？ 我试过这样
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
// error is occured
<script
async
type="text/javascript"
src="{import.meta.env.VITE_KAKAO_API}"
></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
还在根目录中添加了 .env 文件，并创建了带有前缀 （VITE_） 的变量
答：
0赞
Ennoriel
11/26/2022
#1
如果在app.html文件中进行一次性替换，在所有情况下，您都想查看这篇文章： 字符串替换 index.html in vite。它在构建时用 vite 插件替换字符串。如果您的 env var 发生变化，则需要触发新的构建。
在动态属性的情况下（假设您网站的区域设置），您需要有一个服务器（而不是静态站点）并使用钩子，您可以在其中读取您的环境变量（钩子上的文档：https://kit.svelte.dev/docs/hooks）：
export const handle = async ({ event, resolve }) => {
return await resolve(event, { transformPageChunk: ({ html }) => html.replace('%lang%', lang) });
};
评论
index.html