带有外部配置文件的 Vue js答案

【问题标题】：Vue js with an external configuration file带有外部配置文件的 Vue js
【发布时间】：2020-02-07 13:09:07
【问题描述】：

我想知道是否可以让 Vue 应用程序读取外部配置文件。我想象我在其中部署应用程序，将应用程序与配置文件一起发布；此时应该可以更改外部文件中的配置，而无需重新构建整个应用程序。有什么办法可以达到这个结果吗？现在我正在使用一个单独的 Vuex 商店，但如果不重建整个应用程序，我就无法更改配置。

我忘了说这个项目是用 Vue CLI 制作的。

【问题讨论】：

标签： javascript vue.js webpack configuration-files

【解决方案1】：

您可以从公共文件夹中获取config.json，然后在解析回调中加载您的 Vue 应用

将您的配置密钥放在/public/config.json 文件中

{
  "KEY": "value"
}

然后在您的/src/main.js 文件中

fetch(process.env.BASE_URL + "config.json")
  .then((response) => response.json())
  .then((config) => {
       Vue.prototype.$config = config
       new Vue({
         router,
         store,
         render: (h) => h(App)
       }).$mount("#app")
  })

您将在应用程序范围内加载配置。然后你可以使用

mounted() {
  this.$config.KEY // "value"
}

在你的 Vue 组件中

【讨论】：

是否可以使用 require() 从 webpack 中获取配置文件？我尝试使用 require(process.env.BASE_URL + 'config.json') 但它不起作用。
@MaurizioRicci 无法使用 require，因为 webpack 会将动态链接转换为内联 json，这不是预期的结果。关键是在这里使用fetch() 并获取外部json文件
通过在 url 上附加一个动态参数（例如：?t=currentTimestamp），确保每次请求都请求一个新文件。否则浏览器会缓存请求。或者添加适当的 Cache-Control 标头
如何在我的 src/ 文件夹内的 js 文件中访问此文件（例如，需要令牌密钥的 api.js 请求）
使用fetch 与仅在html 中添加<script> 标签以加载config.js 相比有什么好处？

【解决方案2】：

我是这样做的：

在您的公用文件夹中使用您想要的设置创建一个 config.js 文件：

window.VUE_APP_API_KEY = 'blahblahblah';

然后在您的 public/index.html 中将以下行添加到您的 head 部分：

  <script type="text/javascript">
    var cachebuster = Math.round(new Date().getTime() / 1000);
    document.write('<scr' + 'ipt type="text/javascript" src="<%= BASE_URL %>config.js?cb=' + cachebuster + '"></scr' + 'ipt>');
  </script>

然后在您的 VUE 应用程序中，您只需调用 window.VUE_APP_API_KEY。简单，快速:)

【讨论】：

为什么要把script标签分成两部分，然后用串联的方式连接起来？
@bernie 否则会导致错误。有关完整解释和各种逃避方法，请参阅此 SO question。 stackoverflow.com/questions/236073/…

【解决方案3】：

我有一个由节点提供的路由，它返回一个动态创建的 JS 文件并定义一个全局对象，我在其中存储该配置。没有任何依赖于 Vue 的东西。

在index.html:

 <script type="text/javascript" src="config.js"></script>

在node（服务器端）：

  app.get('/config.js', (request, reply) => {
    reply.header('Content-Type', 'application/javascript');
    reply.send(`MyConfig = ${JSON.stringify(config)}`);
  });

在组件中（或其他任何地方）：

{
  data: () => ({
    someField: MyConfig.someField
  })
}

【讨论】：

此解决方案需要外部服务器，即node.js。请参阅下面的我的解决方案，它不需要任何外部服务器。此外，建议的框架和代码示例不对应任何特定的库
是的。我已经在使用 Node 来提供静态文件（和其他东西），所以它适合我的情况。