如何使用Vite从公共目录导入JSON文件?

2024-01-23

我有一个 Vue3/Vite 项目,其中一些数据必须从外部 JSON file.

但是当我构建项目时 - JSON 文件被捆绑。

我需要将 JSON 文件保留在外部。

我尝试过的:

  1. 第一次尝试vite.config.ts
export default defineConfig({
  optimizeDeps:{
    exclude: ['myfile.json'] // then i tried ['**/myfile.json']
  },
})
  1. 第二次尝试

vite.config.ts

assetsInclude: ['**/*.json'],
assetsInlineLimit: 0,
  1. 第三次尝试

App.vue

let jsonData = import.meta.glob('/public/assets/myfile.json')

我做错了什么 - 有没有一种简单的方法可以将 JSON 文件保留在外部?


Nvm,在Vite中你直接使用fetch抓取数据而不是import,即不可能 https://github.com/vitejs/vite/discussions/8242#discussioncomment-4086368 btw.

这个讨论有一个官方答复 https://github.com/vitejs/vite/discussions/8242#discussioncomment-2790559

这就是如何实现你想要的

<script setup>
import { onMounted } from "vue";

onMounted(async () => {
  const response = await fetch("/file.json");
  const file = await response.json();
  console.log("cool file", file);
});
</script>

具有以下结构

file.json being

{
  "name": "bob",
  "age": 29
}

并得到以下结果

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

如何使用Vite从公共目录导入JSON文件? 的相关文章

随机推荐

  • 如何测试具有外部依赖项的 Webpack 包?

    总的来说 我对 Webpacker 和 Rails 还很陌生 我最近开始使用 Webpacker 来捆绑 React 组件 由于应用程序的一部分仍然使用资产管道 因此一些依赖项仍然存储在vendor assets javascript 并可
  • 在实现表单关闭的 WPF MVVM 模式时获取“仅在创建窗口并显示为对话框后才能设置 DialogResult”

    我正在尝试实施this https stackoverflow com a 3329467 713683WPF 表单关闭的 MVVM 模式也在此进行了解释blog http blog excastle com 2010 07 25 mvvm
  • 我可以使用 JOOQ 作为 SQL 解析器吗?

    我正在尝试解析 Java 中的 SELECT 语句 我熟悉 JOOQ 并希望使用它 我知道它并没有明确设计为 SQL 解析器 实际上它的功能远不止于此 因此我认为可能有一种方法可以使用其内部解析器来解析 SELECT 查询 我看到了一些有关
  • 将旧的 mysql 与 PDO 混合

    我正在编写一个使用一些遗留代码的应用程序 较新的代码使用 PDO 而较旧的代码使用原始 mysql 库 第一个代码中的事务中输入了大量数据 以便我可以在错误时回滚 但是在某些时候会调用遗留代码并需要查看相同的数据 除非连接是共享的 否则旧代
  • 快速排序递归深度 O(n) 的堆栈空间不会导致堆栈溢出?

    在最坏的情况下 快速排序递归深度需要 O n 的堆栈空间 为什么在最坏的情况下它不会导致大集合的堆栈溢出 顺序颠倒 如果在枢轴的两侧进行递归 那么在最坏的情况下 它确实会导致足够大的数据的堆栈溢出 这就是为什么没有人在生产代码中使用简单的快
  • 将图像序列化为字符串

    论坛里的好朋友 我一直在搜索很多 但我找不到如何序列化图像并将其传递给 android 中的字符串 可能并非如此 如果有人知道并想告诉我 我将非常感激 虽然java awt Image类不是 未实现 java io Serializable
  • C# 检查复选框状态的更清晰方法?

    我有以下代码 它将布尔值列表作为参数 然后通过单独验证列表来设置每个检查列表的检查状态 有没有更有效的方法来编写以下代码 例如 通过使用循环 public PointCtrlRowSelectionForm List
  • 将函数应用于 R 中的数据帧列表

    我需要有关如何以迭代方式管理列表的帮助 我有以下清单list它由多个具有相同列但行数不同的数据框组成 例子 1 id InpatientDays ERVisits OfficeVisits Narcotics 1 a 0 0 18 1 2
  • 使用 .aar NoClassDefFoundError 但类存在并且已 Dexed

    我有几个项目是为了创建 aar 而构建的 然后我将此 aar 导入到 Android Studio 的 libs 下 此依赖项的 build gradle 文件如下所示 repositories flatDir dirs libs depe
  • 我如何将 ╚ 放入批处理文件中

    我正在尝试在批处理文件中添加行 等 但是将它们直接插入批处理文件中会产生一些我没有输入的奇怪字符 我正在使用记事本 通过alt 200键入这些字符或者取决于我想要的字符 Windows 10 和命令提示符版本 10 0 10240 有什么解
  • 如何在node.js中使用基本身份验证从url获取用户名和密码? [复制]

    这个问题在这里已经有答案了 我需要获取浏览器从 url 发送到我的 node js 应用程序的用户名和密码 我挖掘了各种文档和对象 但找不到任何有用的东西 有人知道该怎么做吗 使用身份验证标头不是一个选项 因为现代的 Bowser 不设置它
  • 是否可以像IPC一样使用Mac OS X XPC在进程之间交换消息?如何?

    据 Apple 介绍 Lion 中引入的新 XPC Services API 为与 Grand Central Dispatch GCD 和 launchd 集成的基本进程间通信提供了一种轻量级机制 似乎可以使用这个 API 作为一种 IP
  • UIWebView 最初不加载某些 URL

    UIWebView 遇到如此奇怪的问题 我无法在网上找到解决方案 我有一个 iPad 应用程序 其中有网络视图 首次安装并运行应用程序时 我尝试加载一个教育网站 http my tac edu au 网络视图只是挂起并超时 我杀死了该应用程
  • 使用相同的内部表示和最少的样板处理多种类型?

    我发现自己在用 Haskell 编写大型程序时经常遇到一个问题 我发现自己经常想要多个不同的类型共享内部表示和几个核心操作 有两种相对明显的方法可以解决这个问题 一种是使用类型类 GeneralizedNewtypeDeriving扩大 将
  • SOAP 和 HTTP 协议的区别?

    SOAP 和 HTTP 协议有什么区别 当我们说 SOAP over HTTP 时 这是什么意思 您可以通过 HTTP 提供任何内容 例如 HTML 图像 声音 视频等 SOAP 是一种基于 XML 的消息编码 通常通过 HTTP 发送 但
  • 如何将比其父元素宽的元素居中?

    我目前有一个固定宽度为 900px 的 div 我想添加一个固定宽度为 950px 的子 iframe 并且我希望它与中心完美对齐 那怎么办呢 Thanks 您可以将子项放置在 50 处 然后使用负边距 即子项宽度的一半 parent po
  • 检查 php 脚本是否仍在运行

    我有一个脚本可以监听 jabber 服务器并做出相应的响应 虽然它不应该停止 但昨晚它却停止了 现在我想每分钟运行一个 cron 作业来检查脚本是否正在运行 如果没有运行则启动它 问题是 如何检查特定脚本是否仍在运行 一些解决方案已经发布h
  • C# 替换 docx 中的文本字符串

    使用 C 有没有一种好方法可以在 docx 文件中查找和替换文本字符串 而无需在该计算机上安装 word 是的 使用Open XML http openxmldeveloper org default aspx 这是一篇解决您的具体问题的文
  • 以 table.column 格式返回 Oracle 列名?

    是否有任何设置或方法可以用来让 Oracle 返回结果 table table
  • 如何使用Vite从公共目录导入JSON文件?

    我有一个 Vue3 Vite 项目 其中一些数据必须从外部 JSON file 但是当我构建项目时 JSON 文件被捆绑 我需要将 JSON 文件保留在外部 我尝试过的 第一次尝试vite config ts export default