使用 Typescript 在 vue.js 中加载 JSON 文件

Posted 2023-02-22

【中文标题】使用 Typescript 在 vue.js 中加载 JSON 文件

【英文标题】：Load JSON file in vue.js with Typescript

【发布时间】：2018-07-27 23:17:55

【问题描述】：

我使用 vue-cli 3 创建了一个带有 typescript 应用程序的 vue.js，并选择了 typescript 选项。

现在我正在尝试导入 .json 文件：

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

但不断收到编译器错误：

Version: typescript 
2.7.17:25, tslint 5.9.1 
Cannot find module './config.json'.

config.json 文件就在尝试加载它的 .ts 旁边。

是否需要添加任何其他配置才能使用 vue-cli 模板加载 .json？

【参考方案1】：

将 "resolveJsonModule": true 添加到您的 tsconfig.json

【参考方案2】：

有几种方法可以解决这个问题。一种是对非 js 文件使用 require() 而不是 import：

const config = require('./config.json')

您还可以使用wildcard module declaration (under "Wildcard module declarations") 创建一个 .d.ts 文件，这将允许您导入 JS 文件。你可以把它放在任何地方，包括它，就像你放置任何 .ts 文件一样。

// json-module.d.ts
declare module '*.json' 
  const data: any
  export default data


// since we use a default export, we now import it like this
import config from './config.json'