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

Question

下午好。

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

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

// config.json

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

我试图将文件放在资产文件夹和 public 文件夹中。我尝试使用 import 和 require 语句将它导入到 App.vue 的 script lang="ts" 元素。我正在使用 vue-属性-装饰器。

// 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，更新一个值，然后让应用程序在运行时读取新值，而无需再次构建项目。我想知道是否可以这样做。

非常感谢您提供的任何帮助。

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 混合的结果，像这样：

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

在 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?

javascript

typescript

vue.js

electron-builder

vue-cli-3

在 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?

javascript

typescript

vue.js

electron-builder

vue-cli-3

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