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

Posted 2023-02-22

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

【英文标题】：How can I read values from a static config.json file to TypeScript in a Vue file after running build:electron in Vue CLI 3?

【发布时间】：2019-03-08 21:26:06

【问题描述】：

下午好。

我想知道是否可以将 config.json 文件添加到可以在运行时读取的 Vue CLI 3 项目中，无论是在开发期间还是在生产期间。

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

// config.json


    "brand": "eat",
    "printerIP": "192.168.0.4"

我已尝试将文件放在资产文件夹和公用文件夹中。我尝试使用 import 和 require 语句将其导入到 App.vue 的 script lang="ts" 元素中。我正在使用 vue-property-decorator。

// App.vue (<script lang="ts">)

const config = require('../public/config.json');

OR

import config from '../public/config.json';

我通过使用 axios 像 API 一样处理它并使用例如 config.brand 简单地访问变量来访问这些值。

// App.vue (<script lang="ts">)

import axios from 'axios';

@Provide() private brand: string = "";

axios
    .get('.config.json')
    .then(response => 
        this.brand = response.data.brand;
    )

OR

this.brand = config.brand;

不幸的是，数据只能在构建时读取并编译成缩小的 javascript。这意味着即使用户在构建应用后更新了 config.json 中的变量，应用也不会更新。我需要能够访问构建文件中的 config.json，更新一个值，然后让应用程序在运行时读取新值，而无需再次构建项目。我想知道是否可以这样做。

您能提供的任何帮助将不胜感激。

【问题讨论】：

不能把.json文件放到public文件夹里，在你的app初始化过程中导入吗？例如（安装应用时加载 json）

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

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

【参考方案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
        
      ,
    );

【讨论】：

努力让它工作。 Json 加载正常，但是如何将值输出到变量中，如 BRAND？ const c = getRuntimeConfig(); console.log(c); 只是记录一个承诺...

你能为我们这些菜鸟多补充一点示例代码吗？

如何在路由器、商店等中使用这个（比如说 PRINTER_IP）？