javascript - 在 Vue CLI 3 中运行 build:electron 后,如何将静态 config.json 文件中的值读取到 Vue 文件中的 TypeScript?
问题描述
下午好。
我想知道是否可以将config.json文件添加到可以在运行时读取的 Vue CLI 3 项目中,无论是在开发期间还是在生产期间。
config.json文件将包含一些字符串,应用程序可以使用这些字符串来动态更改内容,例如显示给用户的视频文件和打印机的 IP 地址。
// config.json
{
"brand": "eat",
"printerIP": "192.168.0.4"
}
我试图将文件放在资产文件夹和公用文件夹中。我尝试使用 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,更新一个值,然后让应用程序在运行时读取新值,而无需再次构建项目。我想知道是否有可能做到这一点。
您可以提供的任何帮助将不胜感激。
解决方案
您认为应该将运行时配置放在该public/
文件夹下是正确的,但不要导入它们。导入将在构建期间得到解决,其结果将通过 webpack。相反,使用fetch
通过 HTTP 加载它们。
Vue 将public
文件夹指定为放置静态资源的地方,这些静态资源应该绕过 webpack 并简单地复制到dist/
. 您可以在运行时使用如下 HTTP 请求访问它们:
const getRuntimeConfig = async () => {
const runtimeConfig = await fetch('/config');
return await runtimeConfig.json()
}
如果您想在多个 Vue 组件中使用这些运行时配置而不进行多次提取,那么在驱动您的 Vue 应用程序(例如src/main.js
)的主 Javascript 文件中进行一次提取并通过 Vue mixins 共享结果,如下所示:
Vue.mixin({
data() {
return {
// Distribute runtime configs into every Vue component
BRAND: BRAND,
PRINTER_IP: json.printerIP
}
},
});
推荐阅读
- c++ - 我可以在命名空间内重新定义内置类型吗?
- asp.net-core - ASP.NET Core 标识
- python - 在 django 中使用 python manage.py runserver 时不显示服务器地址
- c# - c# async filewrite System.IO.IOException at random time
- json - Elm JSON 解码成对象列表:BadBody 错误
- ionic4 - 为什么 HERE Places API 不在设备上工作,而是在 localhost 上工作?
- reactjs - 运行纱线启动脚本时,反应设置快速服务器返回退出代码 1
- windows - Opencv 4.3.0安装Windows错误:vs_version.rc:没有这样的文件或目录?
- javascript - 使用 JS 到多个 html 表的 JSON 数据
- c++ - n个自然数的递归和