使用外部配置文件的Vue js

Question

我想知道是否有可能让Vue应用程序读取外部配置文件。我想象一下，我部署应用程序时，将应用程序与配置文件一起发布；此时应该可以在外部文件中更改配置，而无需重新构建整个应用程序。是否有办法实现这个结果？现在，我正在使用一个独立的Vuex存储库，但我无法在不重新构建整个应用程序的情况下更改配置。我忘了提到该项目是使用Vue CLI创建的。

- Maurizio Ricci

Answer 1

您可以从公共文件夹获取config.json，然后在resolve回调中加载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组件中

2022年11月23日更新（添加Vue 3版本）:

// VUE 3 Version
const app = createApp(App)

fetch(process.env.BASE_URL + "config.json")
  .then((response) => response.json())
  .then((config) => {
    // either use window.config
    window.config = config
    // or use [Vue Global Config][1]
    app.config.globalProperties.config = config
    // FINALLY, mount the app
    app.mount("#app")
  })

- Hammad

---

@MaurizioRicci 不可能使用 require，因为 webpack 会将动态链接转换为内联 JSON，这不是期望的结果。关键是在此处使用 fetch() 并获取外部 JSON 文件。 - Hammad

请确保在每个请求中通过将动态参数附加到URL（例如：?t=currentTimestamp）来请求新文件。否则，浏览器会缓存请求。或者添加适当的Cache-Control头。 - Andy

@bernie 通过以下方式，你可以实现1）动态加载值和2）在启动Vue应用程序之前等待配置文件被解析。 - Hammad

@Hammad，我们可以在使用createApp创建新实例的Vue 3中做到这一点吗？ - abbas

@abbas 是的，你只需要将 app.mount() 包装在 fetch 的 then 回调中即可。 - Hammad

Answer 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。简单快捷 :)

- rip747

---

为什么要将script标签分成两部分，然后再通过连接操作合并它们？ - bernie

@bernie 否则会导致错误。请参考此 SO 问题，了解完整的解释和各种转义方法。https://dev59.com/nHVC5IYBdhLWcg3wnCj6 - rip747

使用 Vite 时，我遇到了“[vite] Internal server error: URI malformed”错误。 - IngoB

Answer 3

我有一个由Node提供的路由，返回动态创建的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
  })
}

- Andy

---

这个解决方案需要一个外部服务器，即node.js。请查看我的解决方案，它不需要任何外部服务器。此外，建议的框架和代码示例并不对应于任何特定的库。 - Hammad

是的，它可以。我已经在使用Node来提供静态文件（和其他东西），所以它适合我的情况。 - Andy