При разработке приложения Svelte вы, вероятно, столкнетесь со сценарием, в котором вам нужно использовать разные значения в зависимости от того, на каком этапе (локальном, промежуточном, производственном и т. д.) работает приложение.

Например, предположим, что у вас есть следующее +page.server.ts файл, в котором используется load функция, которая извлекает сообщения блога с локального сервера и передает их на +page.svelte страница маршрута:

+page.server.ts

import { error, type Load } from '@sveltejs/kit';

export const load: Load = async () => {
    const res = await fetch(``);

    const { data } = await res.json();

    if (res.ok) {
        return { posts: data };
    }

    throw error(404, 'Unable to fetch posts');
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь вы развернули свой бэкенд (API) и готовы развернуть свой интерфейс (приложение Svelte) в рабочей среде — но вы пока не можете этого сделать, потому что URL-адрес, предоставленный для fetch указывает на локальный хост. Нам нужен этот URL для извлечения из нашего развернутого API (давайте представим, что он развернут на ).

Очевидно, мы могли бы заменить URL-адрес на наш рабочий (), разверните его и измените обратно на localhost () всякий раз, когда мы вносим локальные изменения… но это быстро станет утомительным.

Как мы можем динамически использовать разные URL-адреса в зависимости от того, на каком этапе работает приложение?

В более поздних версиях SvelteKitиспользуются следующие сценарии сборки:

"scripts": {
  "dev": "vite dev",
  "build": "vite build",
  //...
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

(Раньше такого не было, раньше svelte-kit dev а также svelte-kit build соответственно)

Это означает, что мы мог (продолжайте читать для лучшего решения) используйте Vite MODE переменная окружения, которая автоматически предоставляется нам. По умолчанию сервер разработки (dev команда) запускается development режим и build команда выполняется в production режим. (Подробнее о режимах можно прочитать здесь).

Вы можете получить доступ к переменным среды через Vite, используя import.meta.envпоэтому, если вы хотите сослаться на MODEвы можете использовать const { MODE } = import.meta.env (или же const MODE = import.meta.env.MODE если ты не фанат деструктурирование как я сам).

Вернемся к примеру, поэтому мы могли бы добавить тройку в MODE что дает нам:

+page.server.ts

import { error, type Load } from '@sveltejs/kit';

const { MODE } = import.meta.env;
const LOCAL_URL = '';
const PROD_URL = ''; // Replace with whatever your deployed URL is

export const load: Load = async () => {
    const res = await fetch(MODE === 'development' ? LOCAL_URL : PROD_URL);

    const { data } = await res.json();

    if (res.ok) {
        return { blogs: data };
    }

    throw error(404, 'Unable to fetch blogs');
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

Предполагая, что вашей конечной точке не требуется ключ API, вышеуказанное должно попасть в правильную конечную точку и вернуть данные, относящиеся к этапу (🥳). Вы можете убедиться в этом, запустив npm run build запустить приложение в "production" режим.

Как мы можем упростить это с помощью пользовательского .env переменные?

Вите использует дотенв package для загрузки любых дополнительных переменных среды в ваш envDir (по умолчанию это корневой каталог):

.env (загружается во всех случаях)
.env.local (загружается во всех случаях, игнорируется git)
.env.[mode] (загружается только в указанном режиме)
.env.[mode].local (загружается только в указанном режиме, игнорируется git)

Еще пара замечаний:

  • Файл env для определенного режима (например, .env.production) будет иметь более высокий приоритет, чем общий файл (например, .env)..
  • Дополнительные переменные среды должны иметь VITE_ префикс.

Зная это, мы можем создать следующее…

.env.development (файл в корневом каталоге для "development" Режим)

содержание:

VITE_API_URL=
Войти в полноэкранный режим

Выйти из полноэкранного режима

.env.production (файл в корневом каталоге для "production" Режим)

содержание:

VITE_API_URL=
Войти в полноэкранный режим

Выйти из полноэкранного режима

… и мы можем упростить нашу функцию загрузки, удалив тройку и просто используя VITE_API_URL переменная окружения. SvelteKit предоставляет нам $env/статические/общедоступныепоэтому вместо использования import.meta.env мы можем использовать import { VITE_API_URL } from '$env/static/private';что дает нам:

+page.server.ts

import { error, type Load } from '@sveltejs/kit';

import { VITE_API_URL } from '$env/static/private';

export const load: Load = async () => {
    const res = await fetch(VITE_API_URL);

    const { data } = await res.json();

    if (res.ok) {
        return { blogs: data };
    }

    throw error(404, 'Unable to fetch blogs');
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

Вот и все! 👨‍💻

Если вам нужна дополнительная информация по вышеуказанному или что-то еще (например, добавление новых сред, таких как staging) проверить Быстрые документы, документы SvelteKit или официальный Стройный диссонанс.