Question

如何在nuxt / vue应用程序中的单个位置加载静态数据？

理想情况下，我会有一个JSON文件，其中包含所有这些数据，这些数据将被加载到vuex中，并且可以在任何地方访问...

我已经建议了两个选项，但我发现它们不干净......

使用webpack模板（而非webpack-simple）时，您可以使用环境变量：http://vuejs-templates.github.io/webpack/env.html。
或者，您始终可以在项目文件夹中的任何位置创建一些文件 - constants.js，用于存储静态数据（例如export const API_URL = 'https:/my-api.com'）。

将该文件中的数据导入您需要的任何位置（例如import { API_URL } from 'path/to/constants'）。

Answer 1

我找到了一个使用vue原型的优雅解决方案

因此使用Nuxt.js

1）在-> here formated_date_str = 01 00 Friday

创建一个插件

~/plugins/globals.js

2）在import Vue from 'vue' import globals from '~/globals.json' import _get from 'lodash/get' Vue.prototype.$g = (key) => { let val = _get(globals, key, '') if (!val) console.warn(key, ' is empty in $g') return val || key }

创建您的json文件

~/global.json

3）在每个{ "website_url": "https://www.company.com", "social": { "facebook": { "url": "https://www.facebook.com/company" }, "twitter": { "url": "https://www.twitter.com/company" } } }文件中使用这些

.vue

Answer 2

我找到了一种最简单的方法来设置配置（json）文件并在任何组件中使用。

步骤-

在根目录中创建setting.json文件。
在中间件中，创建一个文件settings.js（或保留任何名称）并粘贴此代码

    import settings from '../settings.json'
    export default function ({ store, route, redirect, req}) {
        process.env = settings
    }

nuxt.config.js中的3-在其中添加设置

     router: {
            middleware: ['users', 'settings']
      },

用途- 在任何组件或页面中-

data(){
      return {
            settings: process.env
      }
},

现在您可以在组件中的任何位置使用设置。

Vue.js或Nuxt.js集中应用程序配置

2 个答案: