加载自定义配置运行时

时间:2019-06-05 07:13:32

标签: vue.js plugins configuration nuxt.js

我有一个nuxt应用程序,当该应用程序首次启动时,我需要在其中附加一个生成的配置文件中的数据。我无法在实际构建中执行此操作的原因是因为此时配置文件尚不存在;因此,请参见“配置文件”。它是在引导脚本调用npm start之前生成的。

为什么在启动您可能会问的应用程序之前不生成配置文件,这是因为该应用程序在docker容器中运行,并且构建的映像不能包含特定于环境的配置文件,因为它应在不同的环境中使用,例如作为测试,准备和生产。

当前,我正在尝试使用一个钩子来解决此问题,但是我不确定如何在应用程序中实际设置配置数据,以便可以在任何地方使用它。

# part of nuxt.config.js
  hooks: {
    listen(server, listener) {
      # load the custom configuration file.
      fs.readFile('./config.json', (err, data) => {
        let configData = JSON.parse(data));
      });
    }
  },

当应用程序首次开始侦听连接客户端时,将触发上述钩子。不确定这是最好的方法,甚至可能的方法。

我也尝试使用插件来解决此问题:

import axios from ‘axios’;

export default function (ctx, inject) {
  // server-side logic
  if (ctx.isServer) {
    // here I would like to simply use fs.readFile to load the configuration, but this is not working?
  } else {
    // client-side logic
    axios.get(‘/config.json’)
      .then((res) => {
        inject(‘storeViews’, res.data);
    });
  }
};

在上面的代码中,我在使用fs模块和axios时都遇到了问题。

我也在考虑使用中间件来做到这一点,但不确定如何进行。

1 个答案:

答案 0 :(得分:0)

如果其他人有这种问题,这是我最后想出的解决方案:

// plugins/config.js
class Settings
{
  constructor (app, req) {
    if (process.server) {
      // Server side we load the file simply by using fs
      const fs = require('fs');
      this.json = fs.readFileSync('config.json');
    } else {
      // Client side we make a request to the server
      fetch('/config')
        .then((response) => {
          if (response.ok) {
            return response.json();
          }
        })
        .then((json) => {
          this.json = json;
        });
       }
     }
}

export default function ({ req, app }, inject) {
  inject('config', new Settings(app, req));
};

要使其正常工作,我们需要使用服务器中间件:

// api/config.js
const fs = require('fs');
const express = require('express');
const app = express();

// Here we pick up requests to /config and reads and return the
// contents of the configuration file
app.get('/', (req, res) => {
  fs.readFile('config.json', (err, contents) => {
    if (err) {
      throw err;
    }
    res.set('Content-Type', 'application/json');
    res.end(contents);
  });
});

module.exports = {
  path: '/config',
  handler: app
};