如何在运行Vue CLI 3中的build:electron后，从静态config.json文件读取值到TypeScript中的Vue文件？

Question

下午好。

我在想是否可以将一个config.json文件添加到Vue CLI 3项目中，在开发和生产期间都可以读取。

config.json文件将包含一些字符串，应用程序可以使用这些字符串来动态更改内容，例如向用户显示的视频文件和打印机的IP地址。

// config.json

{
    "brand": "eat",
    "printerIP": "192.168.0.4"
}

我尝试将文件放置在assets文件夹和public文件夹中。我尝试使用import和require语句将其导入到App.vue的

- stack145

---

你不能把 .json 文件放在 public 文件夹中，在应用程序初始化过程中导入它吗？例如（在应用程序挂载时加载 json）。 - funkysoul

你能够让config.json正常工作了吗？我正在尝试使用相同的技术来配置托管在AWS S3上的静态Vue.js网站，而不将AWS堆栈特定环境变量编译到缩小的JavaScript代码中，但是到目前为止，我无法避免静态config.json中变量的编译时缩小。 - Ian Downard

在我的看法中，JavaScript 中的任何变量，无论是直接在 Vue 文件中还是被导入，都会在网站构建之前编译，并且之后无法更改。API 调用的结果可以是动态的，因此我的解决方案是将变量保存在可以通过 API 调用定位的地方。在我的情况下，我创建了一个 .NET Core Web API，并将我的变量保存在该层中，然后通过控制器使用 axios 在我的 Vue 项目中访问它们。 - stack145

Answer 1

你的想法是对的，应该将运行时配置放在public/文件夹下，但不要进行导入。导入会在构建时解决，其结果会通过webpack处理。相反地，使用fetch通过HTTP加载它们。

Vue指定public文件夹为放置静态资源的位置，这些资源应该绕过webpack并简单地被复制到dist/中。你可以通过类似这样的HTTP请求在运行时访问它们：

const getRuntimeConfig = async () => {
  const runtimeConfig = await fetch('/config');
  return await runtimeConfig.json()
}

如果你想在多个Vue组件中使用运行时配置而不进行多次获取, 那么可以在驱动Vue应用程序的主JavaScript文件(例如src/main.js)中进行一次获取，并通过Vue mixins共享结果，如下所示:

  Vue.mixin({
      data() {
        return {
          // Distribute runtime configs into every Vue component
          BRAND: BRAND,
          PRINTER_IP: json.printerIP
        }
      },
    });

- Ian Downard

---

努力让它工作。Json 加载正常，但如何将值提取到变量中，例如 BRAND？const c = getRuntimeConfig(); console.log(c); 只记录了一个 Promise... - Jammer

你能为我们这些新手完善一下示例代码吗？ - Jammer

我该如何在路由器、存储器等设备中使用这个（比如说PRINTER_IP）？ - Yasin Okumuş