fetch 返回一些看起来像 HTML 的东西，而不是我获取的东西

问题描述 投票：0回答：1

所以我对 Web 开发非常陌生，在学习了基础知识后，我想学习一个框架，所以我选择了 vue 并使用 vite 运行它 使用 

npm init vue@latest
女巫设置 vue 和 vite 创建了一个项目，它工作得很好，对我来说最大的问题是我需要通过 fetch 访问一些 JSON 文件，但是当我使用 fetch 时，它会返回一些看起来像这样的 HTML 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
  </head>
  <body>
  <div id="app"></div>
    <script type="module" src="/src/main.js?t=1710967198517"></script>
  </body>
</html>

而不是实际的 JSON 文件

我正在运行的代码是

fetch(path/to/my/file.json).then((p) => p.json())

问题是 p 等于上面的 HTML 代码，而不是我要获取的 json 字符串

我不确定为什么会这样，但我认为因为我的网站运行在本地主机服务器上，因为 Web URL 工作正常，它不能只通过简单的路径访问我的本地文件，我的理论是我需要以某种方式将静态文件与 vite 捆绑在一起但找不到有关如何操作的信息

也不要告诉我使用 import 来导入文件，因为这在其他上下文中会有所帮助，但在我中，我使用的库接受路径或 URL 并执行提取，所以我不能只导入 JSON 我必须去拿它

javascript vue.js server vite fetch-api
1个回答
0
投票

使用 Vite，可以通过三种方式处理捆绑的静态文件 URL...

  1. 使用显式 URL 导入，或
  2. 使用公共目录
  3. 创建 
    import.meta.url
    相对 URL

通常，JSON 文件在构建阶段作为内容导入和处理。要使用 

fetch()
中的一个，您需要一个 URL。

显式 URL 导入

import jsonUrl from 'path/to/my/file.json?url'; // 👈 note the ?url suffix

fetch(jsonUrl).((p) => p.json());

公共目录

将文件放入 

public/path/to/my/file.json
并使用绝对 URL 

fetch('/path/to/my/file.json').then((p) => p.json());

模块相对URL

const jsonUrl = new URL('./relative/path/to/my/file.json', import.meta.url).href;

fetch(jsonUrl).((p) => p.json());
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.