如何重要并将json文件读取到Vue / Gridsome main.js中

问题描述 投票:0回答:1

我正在使用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": "[email protected]"
}

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的插件才能读取这些属性,并且作为示例,我将如何访问品牌价值?

vue.js gridsome
1个回答
0
投票

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

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
}
© www.soinside.com 2019 - 2024. All rights reserved.