某些环境变量可以安全地暴露给浏览器。这些与带有 PUBLIC_ 前缀的私有环境变量不同。
¥Some environment variables can be safely exposed to the browser. These are distinguished from private environment variables with a PUBLIC_ prefix.
添加值到 .env 中的两个公共环境变量：
¥Add values to the two public environment variables in .env:
PUBLIC_THEME_BACKGROUND="steelblue"
PUBLIC_THEME_FOREGROUND="bisque"然后，将它们导入到 src/routes/+page.svelte 中：
¥Then, import them into src/routes/+page.svelte:
src/routes/+page
<script>
const PUBLIC_THEME_BACKGROUND = 'white';
const PUBLIC_THEME_FOREGROUND = 'black';
import {
PUBLIC_THEME_BACKGROUND,
PUBLIC_THEME_FOREGROUND
} from '$env/static/public';
</script><script lang="ts">
const PUBLIC_THEME_BACKGROUND = 'white';
const PUBLIC_THEME_FOREGROUND = 'black';
import {
PUBLIC_THEME_BACKGROUND,
PUBLIC_THEME_FOREGROUND
} from '$env/static/public';
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
const PUBLIC_THEME_BACKGROUND = 'white';
const PUBLIC_THEME_FOREGROUND = 'black';
</script>
<main
style:background={PUBLIC_THEME_BACKGROUND} style:color={PUBLIC_THEME_FOREGROUND}>
{PUBLIC_THEME_FOREGROUND} on {PUBLIC_THEME_BACKGROUND}</main>
<style>
main {position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 10vmin;
}
</style>