TypeScript+Vue:打开index.html时加载静态json配置

Question

我正在开发一个需要将API密钥插入配置中的应用程序。

由于我使用npm run build生成一个静态页面(带有index.html的dist文件夹，用于加载app.js和适当的块和样式(，所以配置文件只读取一次，然后嵌入到生成的app.js中。

由于它的工作方式，每当我更改非嵌入式配置中的值(可在dist/public/文件夹中获得(时，这些值都不会在app.js中正常刷新。

有没有任何方法可以在index.html和附加的app.js重新加载时动态导入配置？

以下是我尝试过的：

import * as config from '../public/finnhub.config.json';
const stockProvider = reactive(new FinnhubStockProvider(config));

它确实加载了配置，但仅在构建期间加载，这意味着它是恒定的。

Answer 1

导入配置文件会导致它被绑定。如果你想按需读取配置文件，你可以fetchit:

import { onMounted, ref } from 'vue'
export default {
setup() {
const config = ref({})
const fetchData = async () => {
const resp = await fetch('/finnhub.config.json')
config.value = await resp.json()
}
onMounted(() => {
fetchData()
})
}
}