如何通过svelte访问本地json文件?

2024-02-17

现在我使用 onMount 异步函数来访问

const dataAPI = './jsfwperf.json';
let data = [];

onMount(async () => {
    const res = await fetch(dataAPI)
    .then(res => res.json())
    .then(data => {
        console.log(data)
    })
    .catch(err => console.error(err));
});

但在终端中显示文件丢失

bundles src/main.js → public\build\bundle.js...
[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)

文件位置与我使用的 app.svelte 相同。 如何通过 svelte 正确访问本地 json 文件?


在命令行中:

cd yourproject
npm install @rollup/plugin-json --save-dev

编辑rollup.config.js file:

// add at the beginning of the file :
import json from '@rollup/plugin-json'

//...

// under the plugin line :
plugins: [
  json({
    compact: true
  }),

//...

在你的 svelte 组件中:

<script>
import * as myjson from './test.json'
</script>

<p>{myjson.mykey}</p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何通过svelte访问本地json文件? 的相关文章

  • Ajax文件上传

    我想使用 Ajax 和 php 上传文件 我有一个表格
  • 异步WCF调用来保存线程?

    In 另一个问题 https stackoverflow com q 19731600 279516 建议我发送异步网络请求 而不是在后台线程上发送同步请求 原因是为了不浪费一根线 我试图理解这是怎么回事 这是最初的做法 我可以理解这里怎么
  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • JavaScript - 无需布尔值即可运行一次

    有没有办法只运行一段JavaScript代码ONCE 而不使用布尔标志变量来记住它是否已经运行过 具体来说not就像是 var alreadyRan false function runOnce if alreadyRan return a
  • Sonar 中的 javascript 代码覆盖率

    我是使用 Sonar 和插件进行 javascript 代码覆盖的新手 使用 Sonar 分析时 有哪些可能性可以找出 javascript 代码的质量 包括代码覆盖率 目前我正在使用 karma runner 它提供代码覆盖率报告 可以在
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • Sequelize - 使用 es6 和模块运行迁移

    我不确定我是否做错了什么或者什么 我觉得我正在运行一个现代的 相当常见的堆栈 但我无法让新的 Sequelize v6 与我的设置完美配合 我在 Node v14 17 Sequelize v6 6 2 上 在我的 package json
  • 在多个动态添加的表单上初始化 jQuery validate() 函数

    有人建议最好初始化一个 form validate 在页面加载而不是点击事件上运行 jquery form validate 插件仅允许在输入更改时提交 https stackoverflow com questions 10984196
  • 在动态创建的元素上添加事件监听器[重复]

    这个问题在这里已经有答案了 是否可以向所有动态生成的元素添加事件侦听器 Javascript 我不是页面的所有者 因此我无法以静态方式添加侦听器 对于页面加载时创建的所有元素 我使用 doc body addEventListener cl
  • JavaScript:常量属性

    在javascript中 我可以将对象的属性声明为常量吗 这是一个示例对象 var XU Cc Components classes or function aXU this Cc Components classes var XU new
  • Firebase 身份验证在 iOS 登录时卡住,没有错误

    我已经使用电子邮件和密码设置了 firebase 身份验证登录的最基本实现 firebase auth signInWithEmailAndPassword email password then gt console log Logged
  • 类型“void”不可分配给类型“((event:MouseEvent) => void) |不明确的'

    import as React from react import App css import PageTwo from components PageTwo export interface IPropsk data Array
  • 将 window.location 传递给 Flask url_for

    我正在使用 python 在我的页面上 当匿名用户转到登录页面时 我想将一个变量传递到后端 以便它指示用户来自哪里 发送 URL 因此 当用户单击此锚链接时 a href Sign in a 我想发送用户当前所在页面的当前 URL
  • @aspnet/signalr 与 @microsoft/signalr javascript 库

    aspnet signalr 与 microsoft signalr javascript 库有什么区别 两者似乎都对 DotNetCore SignalR 有效 两者似乎都很活跃 在一些教程中 我找到 aspnet signalr 在Do
  • JavaScript Promise 不执行 .then()

    我在 JavaScript 中的 Promise 方面遇到了一些问题 我想做的是获得一个地址列表 然后对于每个地址 我需要调用地理编码 API 来获取 lat lng 然后我将继续将标记与热图一起绘制 这是我的代码 let promiseK
  • 根据特定字符获取整个字符串或子字符串

    我有一个包含 MIME 类型的字符串 例如application json 现在我想将其与实际的 HTTP 标头进行比较 在本例中content type 如果标头包含 MIME 类型 那么就很简单 if mimeType contentT
  • Aurelia - 仅 HTML 自定义元素的内联定义

    我的 Aurelia 视图模型中有一个递归对象 如下所示 Class BottomlessPit Name string MorePits BottomlessPit null 因此 我想在 Aurelia 视图中使用递归模板 它只会在一个
  • 不使用控件时,视频元素在 Chrome 中消失

    So I think这是一个浏览器错误 它出现在一个更复杂的设计 网站中 但我已经进行了很好的尝试 简化了我的代码和设计等 并发现了以下内容 嵌入时
  • 用javascript调用外部网页(跨域)

    我正在尝试使用以下网络服务来验证提要这个问题 https stackoverflow com questions 11996430 check if a url is a valid feed 但浏览器不允许我向另一台服务器发送 ajax
  • JQuery 删除和内存泄漏

    我正在开发一个游戏 我看到了很多内存消耗 我使用jquery animate 动画完成后 我 remove 元素 我的问题是 从 dom 树中删除一个元素后 对象还存在记忆中吗 Javascript 是一种垃圾收集语言 这意味着当没有代码保

随机推荐

  • 使用 ASP.NET GenericHandler 时管理 ASP.NET 中的会话超时

    例如 我有一个使用 jQuery 作为客户端框架的 Web 应用程序 现在 大多数页面都通过使用 AJAX 来运行 并通过使用通用处理程序 ashx 与服务器进行通信 现在我有一个问题 我想看看当我的用户会话过期时处理这些请求的最佳解决方案
  • 操纵事件和平移模式

    我正在开发一个用于触摸设备的 WPF 我面临一个奇怪的问题 我的 XAML 结构是
  • 在 Winforms 中检测空闲用户

    如果用户有 5 分钟不活动 我想暂停我的程序 我所说的不活动是指在那段时间没有按下鼠标或键盘 包括在程序之外 有什么出发点吗 在计时器内你可以 p invokeGetLastInputInfo http www pinvoke net de
  • 一次性编写字典?

    我很想在 Python 中拥有一个一次性写入的字典对象 这样 my dict 1 foo my dict 2 bar my dict 1 baz Raises KeyError 我可以想象制作一个简单的食谱 但我想知道是否存在经过深思熟虑的
  • 如何在 win32 中创建具有默认行为的按钮

    我一直在尝试创建一个具有默认行为的按钮 即当用户按 ENTER 时 该按钮将被触发 我使用 WS TABSTOP 样式创建了按钮 并向其发送了带有 BS DEFPUSHBUTTON has WPARAM 参数的 BM SETSTYLE 消息
  • 如何访问具有数组类型值的 Solidity 映射?

    我定义了一个映射类型的状态变量 例如映射 uint256 gt uint256 我想将其公开 以便我可以从合同之外访问它 但是编译器报错TypeError Wrong argument count for function call 1 a
  • Android ListView 排序

    我只是从 Android 开发开始 虽然 Milestone 是一个不错的设备 但 Java 不是我的自然语言 而且我在 Android SDK Eclipse 和 Java 本身的 Google 文档上遇到了困难 反正 我正在为 Andr
  • Realm Swift 回调函数

    我使用 swift3 和 Realm 2 3 交易完成后我需要回调 例如 我有如下代码 如何在领域数据事务完成后获得回调 DispatchQueue main async try self realm write self realm ad
  • LINQ - (x, i) 做什么?

    我今天偶然发现了这段代码 并意识到我根本不理解它 someArray Select x i gt new XElement entry new XElement field new XAttribute name Option i 1 重点
  • 从 VS2015 发布后,DNX Web 命令抛出“无法解析项目”错误

    这是关于 net core 的过时预发布版本 我使用 Visual Studio 2015 的测试版 预览版在预发布的 ASP Net 5 后来更名为 asp net core 中创建了一个基本项目 我已将该项目发布到文件系统并尝试运行它从
  • iOS Swift 标签栏图标插入在运行时被删除

    我在标签栏控制器中有两个 ViewController 在界面生成器中 我已将图像插图 5 5 5 5 应用于选项卡栏图标 以获得我想要的尺寸 当我最初运行模拟器时 一切看起来都很棒 但是当我使用 Tab 键切换到第二个 ViewContr
  • Airconsole 和 Unity 集成问题

    首先 我是 Unity 和 Airconsole 这两个平台的新手 我只是在探索与空调集成的统一 但我在导入 空调插件插件 时遇到错误 从Asset Store 我正在使用最新版本的unity2018 3 0f2 Personal在 Win
  • MEAN JS - 主要 html 文件 (index.html) 位于哪里

    我刚刚开始学习 MEAN JS 我正在尝试查找主页的 html 文件 但是我只在视图文件夹中看到 home client view html 和 header clinet view html 据我所知 通常有一个主html 包含了主页的所
  • glGetString 和 glGetShaderInfoLog 等函数使用什么编码

    OpenGL有一些功能 例如glGetString and glGetShaderInfoLog返回字符串 这些使用什么形式的文本编码 我认为 鉴于它们作为GLchar 它是返回值中包含的 ASCII 编码文本 但这是否在任何地方指定 作为
  • Flutter守护进程启动失败

    我每次打开时都会收到此警告VS code 有什么办法可以解决这个问题吗 谢谢 我添加了这个警告的日志 我努力了扑干净 and 扑医生一切都很好 但是每次我打开 VS Code 时仍然出现此警告 我还遇到了一个问题 VS Code 显示没有设
  • 实体框架 Linq 等于值或为 null

    我正在尝试使用 linq 从视图中获取项目列表 其中字段 LocationId 为值或为 null LocationId 字段是 int 我正在尝试的代码是这样的 var items context Items Where d gt d L
  • 每个工人的最大日期

    考虑两个表 工作表有如下字段W ID W Name 课程表有如下字段C ID C Name C Date 一个工人可以选修多门课程 一门课程也可以由许多工人选修 因此 两个表之间存在多对多关系 打破多对多 并创建一个名为 Takes 的新表
  • 如何调整 IntelliJ 中行尾的位置

    在 IntelliJ 中 就像在 Eclipse 中一样 代码编辑器中有一条细灰色垂直线 我假设就像在 Eclipse 中一样 该行显示了 行尾 应该在的位置 2个问题 1 在IntelliJ中哪里可以调整一行的长度 2 如果不使用与 1
  • React-Router:使用 Navlink 将道具从一个组件传递到另一个组件

    我在用
  • 如何通过svelte访问本地json文件?

    现在我使用 onMount 异步函数来访问 const dataAPI jsfwperf json let data onMount async gt const res await fetch dataAPI then res gt re