Typescript 打字脚本+；Vue:打开index.html时加载静态json配置

我正在开发一个需要在配置中插入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));

---

它确实会加载配置，但仅在构建期间加载，这意味着它是常量。

导入配置文件会导致它被捆绑。如果您希望配置文件按需读取，您可以

获取它：

从“vue”导入{onMounted，ref}
导出默认值{
设置（）{
const config=ref（{}）
const fetchData=async（）=>{
const resp=await fetch（'/finnhub.config.json'）
config.value=await resp.json（）
}
未安装（（）=>{
fetchData（）
})
}
}
导入配置文件会导致它被捆绑。如果您希望配置文件按需读取，您可以
获取它：

从“vue”导入{onMounted，ref}
导出默认值{
设置（）{
const config=ref（{}）
const fetchData=async（）=>{
const resp=await fetch（'/finnhub.config.json'）
config.value=await resp.json（）
}
未安装（（）=>{
fetchData（）
})
}
}
是的，请注意：这仅适用于托管静态文件而不是在浏览器中作为文件运行index.html的情况。（双击index.html）。是的，请注意：这仅适用于托管静态文件而不是在浏览器中作为文件运行index.html的情况。（双击index.html）。