在 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"
}

我試圖將文件放在 assets 文件夾和 public 文件夾中。 我嘗試使用 import 和 require 語句將它導入到App.vue的腳本 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 ，更新一個值，然后讓應用程序在運行時讀取新值，而無需再次構建項目。 我想知道是否有可能做到這一點。

您可以提供的任何幫助將不勝感激。

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
        }
      },
    });