Файл JSON в Vite
Файл JSON импортируют как модуль и читают поле как обычное значение.
Короткие данные удобно хранить
в отдельном файле с расширением
json
рядом с кодом.
Строка import
вернёт уже разобранный объект,
без вызова fetch
и без ручного разбора текста.
Зададим поле с текстом
для страницы:
{
"greeting": "hello"
}
Импортируем объект
и возьмём нужное поле
в src/main.js:
import data from './data.json';
document.body.textContent = data.greeting;
Откроем страницу
на сервере разработки.
На экране будет слово hello
из JSON.
При сборке файл попадёт
в граф модулей,
а значение окажется
в итоговом JavaScript.
Проверим сборку,
если текст должен совпадать
и в dist:
npm run build
В собранном бандле
строка hello
остаётся частью кода,
хотя в исходниках
она лежала только в JSON.
Так удобно менять подписи
и мелкие справочники
без правки логики модулей.
Создайте src/labels.json с полем title и значением panel, импортируйте файл в src/main.js и выведите title на странице.
Добавьте в src/labels.json поле hint, прочитайте оба поля в src/main.js и выведите их через пробел в одном абзаце.
