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中

1 个答案: