如何将 json 文件导入并读取到 Vue / Gridsome main.js

Question

我正在开发一个使用 Vue/Gridsome 的项目，我对将带有 import './config.json' 的 config.json 文件导入到 main.js 文件有疑问。

config.json个文件如下：

{
  "brand": "Name"
  "company_no": "12345678"
  "charity_no": "87654321"
  "registered_address": "25 Riverdale House: London: SE13 7LW"
  "contact_email": "support@name.com"
}

main.js文件如下：

export default function (Vue, { router, head, isClient }) {
  Vue.component('Layout', DefaultLayout)
  Vue.component('Page', PageLayout)
  Vue.use(InfiniteLoading)

  // General

  head.meta.push({
    name    : 'description',
    content : config.brand // I'd like to place the json value here
  })

  // ...

我是否需要安装一个解析 JSON 的插件才能读取这些属性，我将如何访问品牌价值作为示例？

Answer 1

您可以简单地执行以下操作：

import configJson from './config.json';

const config = JSON.parse(configJson);

然后您可以使用 config.brand 访问数据。

关于JSON parse的更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

编辑如果你有 webpack >= 2.0.0

https://webpack.js.org/loaders/json-loader/

否则您可以创建一个 js 文件并从那里导出 json：

config.js

export default
{
  // put json here
}

如何将 json 文件导入并读取到 Vue / Gridsome main.js

How to import and read a json file into Vue / Gridsome main.js

vue.js

gridsome