Как импортировать файл JSON из общедоступного каталога с помощью Vite?
У меня есть проект Vue3/Vite, в котором некоторые данные должны быть прочитаны из внешнего файла JSON.
но когда я создаю проект, файл JSON получает в комплекте.
Мне нужно сохранить файл JSON внешним.
Что я пробовал:
- первая попытка
vite.config.ts
export default defineConfig({
optimizeDeps:{
exclude: ['myfile.json'] // then i tried ['**/myfile.json']
},
})
- вторая попытка
vite.config.ts
assetsInclude: ['**/*.json'],
assetsInlineLimit: 0,
- третья попытка
App.vue
let jsonData = import.meta.glob('/public/assets/myfile.json')
Что я делаю неправильно - есть ли простой способ сохранить внешний файл JSON?
мне нужно предотвратить объединение myfile.json ->, чтобы его можно было увидеть в производственной папке dist/assets. Вероятно, вы думаете, что пример 2 — это то место, где я пытаюсь его включить, но цель состояла в том, чтобы сообщить vite, что он мне нужен как отдельный актив.
Не уверен, что понял. Если вы НЕ хотите, чтобы он был в комплекте, вы должны сохранить его в каталоге public. Если вы ХОТИТЕ, чтобы он был в комплекте, поместите его в свои каталоги src или assets. Не уверен, что понимаю, как можно смешивать оба принципа объединения + хранение в качестве актива.
вероятно, вы правы, но проблема с хранением в общей папке заключается в том, что файлы в общей папке не могут быть включены. и мне нужно, чтобы приложение могло читать содержимое JSON.
Если он находится в public, вы можете получить к нему полный доступ. На самом деле, вы можете получить доступ к своему JSON из любого места внутри вашего проекта.
включить не работает - vitejs.dev/guide/assets.html#the-public-directory, не требует ни того, ни другого. так как я мог получить к нему доступ иначе?
Со штатным фронтендом современным import вполне.
В документации Vite четко указано: «Активы в общедоступном каталоге не могут быть импортированы из JavaScript». - и я также столкнулся с ошибками. Не могли бы вы направить меня к некоторым ресурсам о «обычном современном импорте внешнего интерфейса», которые могли бы выполнить эту работу?
«импортировано из JavaScript» ≠ «импортировано в JavaScript», я думаю, документ означает, что вы не можете генерировать вещи на лету во время выполнения? Не уверен, но пока это идет в противоположном направлении, ха-ха (может быть, ошибка или очень плохая формулировка).
Ответы 1
Nvm, в Vite вы напрямую используете fetch для получения данных, а не import, что невозможно кстати.
В этом обсуждении есть официальный ответ
Вот как добиться желаемого
<script setup>
import { onMounted } from "vue";
onMounted(async () => {
const response = await fetch("/file.json");
const file = await response.json();
console.info("cool file", file);
});
</script>
Со следующей структурой
file.json быть
{
"name": "bob",
"age": 29
}
И со следующим результатом
Что вы имеете в виду под внешним? Вы оба пытаетесь исключить + импортировать его в свои примеры.