时间戳

首页 > 解决方案 > svelte - 从本地文件夹读取 json 文件

json - svelte - 从本地文件夹读取 json 文件

问题描述

我的svelte应用程序需要json从公用文件夹中读取文件。我完全按照这个链接rollup的设置，然后添加到我的：jsonapp.svelte

import * as port from '/port.json';

port.json与 .一起位于公用文件夹中index.html。但我不断收到此错误：

main.js:11 未捕获的 ReferenceError：端口未在 main.js:11 中定义

我收到这条消息Terminal，我不确定这意味着什么：

(!) 缺少全局变量名使用 output.globals 指定对应于外部模块 /port.json 的浏览器全局变量名（猜测“端口”）

我该如何解决这个问题？

标签： jsonsvelterollup

解决方案

你有两个选择。

  1. 将文件移动到您的src/文件夹并使用 Rollup 将其与应用程序代码的其余部分捆绑在一起。这是您需要@rollup/plugin-json捆绑 json 文件的地方。然后你可以像这样导入它：
<script>
    import json from './port.json';
</script>

<p>{JSON.stringify(json)}</p>
  1. 将文件保存在您的public/文件夹中，并在运行时使用 fetch 检索它。
<script>
    let fetchJson = fetch('port.json').then(res => res.json());
</script>

{#await fetchJson}
    <p>Loading JSON</p>
{:then result}
    <p>{JSON.stringify(result)}</p>
{/await}

推荐阅读