Svelte导入本地文件显示[object Object]/[object Promise]问题求助

针对JSON文件的问题 #

情况1：import Data from './Data.json'显示[object Object] #

这是因为导入的JSON本身是JavaScript对象，直接在页面显示时会被默认转为字符串[object Object]。解决办法：

• 要显示完整JSON结构，用JSON.stringify(Data)转成可读字符串，示例：

  document.body.textContent = JSON.stringify(Data, null, 2); // 第三个参数是缩进，方便阅读
  

• 要显示对象里的具体内容，直接访问对应属性，比如JSON里有title字段，就用Data.title。

情况2：import * as Data from './Data.json'导致页面崩溃 #

这种命名空间导入在Vite、Webpack等打包工具中，会把JSON包装成带default属性的对象，直接使用容易因结构不匹配报错。建议直接用默认导入import Data from './Data.json'即可，无需用命名空间导入。

针对fetch方式显示[object Promise]的问题 #

fetch返回的是Promise对象，不是直接的文件内容，必须等待Promise完成才能拿到实际数据。两种处理方式：

方式1：.then链式调用 #

fetch('./Data.json')
  .then(response => response.json()) // 纯文本文件换成response.text()
  .then(data => {
    // 这里才是实际的文件内容
    document.body.textContent = JSON.stringify(data, null, 2); // JSON文件显示方式
    // 纯文本直接用document.body.textContent = data;
  })
  .catch(err => console.error('加载失败:', err));

方式2：async/await（更直观） #

async function loadLocalFile() {
  try {
    const response = await fetch('./Data.json');
    const data = await response.json(); // 纯文本换response.text()
    document.body.textContent = JSON.stringify(data, null, 2);
  } catch (err) {
    console.error('加载出错:', err);
  }
}
loadLocalFile();

纯文本文件的额外说明 #

纯文本文件（如.txt）用导入方式需要打包工具额外配置（比如Vite需配置、Webpack需raw-loader），容易出问题。更稳妥的方式是用fetch配合response.text()获取内容。

内容的提问来源于stack exchange，提问作者matthew