Vite与Sveltekit的环境变量

在 Vite 和 SvelteKit 中，默认都是支持从项目根目录的 .env 和 .ebv.[mode] 文件中自动加载环境变量的.

• Vite 使用 import.meta.env.VITE_APP_TITLE 来访问 .env 中的环境变量
• Sveltekit 中访问环境变量有三种方式:
  • $env/dynamic/private
  • $env/dynamic/public
  • $env/static/private
  • $env/static/public

不管是 Vite 还是 Sveltekit，都默认是在 .env 文件中定义环境变量的，这在普通的项目中没有问题，但是如果我们使用 Monorepo 的方式，
并且希望在 Monorepo 的根目录而不是 package 的目录中定义环境变量，通过根目录的一个 .env 文件管理整个项目的环境变量，需要修改 vite.config.js 或者 “svelte.config.js文件。两者都支持配置env.dir`

Vite

import { sveltekit } from "@sveltejs/kit/vite"
import { defineConfig, loadEnv } from "vite"
 
export default defineConfig(({ mode }) => {
  return {
    plugins: [sveltekit()],
    envDir: "../../",
    // 还可以指定文件
    // define: {
    // 	'process.env': {
    // 		...process.env,
    // 		...loadEnv(mode, '../../.env')
    // 	}
    // }
  }
})

Sveltekit

import { mdsvex } from "mdsvex"
import adapter from "@sveltejs/adapter-auto"
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [vitePreprocess(), mdsvex()],
 
  kit: {
    adapter: adapter(),
    env: {
      // 指定查找环境变量的目录
      dir: "../../",
    },
  },
  extensions: [".svelte", ".svx"],
}
 
export default config

Sveltekit 中的环境变量定义与加载

只能在服务器运行

// +page.server.ts
import { AUTH_SECRET } from '$env/static/private';
import { SECRET_API_KEY  } from '$env/static/private';
 
// .env
AUTH_SECRET="xxx"
SECRET_API_KEY="root env secret key"

客户端运行

// +page.svelte
import { PUBLIC_API_KEY } from '$env/static/public';
 
// .env
PUBLIC_API_KEY="root env public key"

参考

• 在Sveltekit中使用环境变量
• [https://svelte.dev/docs/kit/$env-dynamic-private](https://svelte.dev/docs/kit/$env-dynamic-private)
• https://vite.dev/guide/env-and-mode.html#env-variables-and-modes
• Developer Mindset