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

Question

我使用vue-cli3创建了一个带有打字稿应用程序的 vue.js并选择了打字稿选项。

现在我正在尝试导入一个 .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？

Answer 1

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

Answer 2

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

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

您还可以使用通配符模块声明（在“通配符模块声明”下）创建一个 .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'