Vue3 + Electron框架读取程序外部配置文件

网上找了一堆都不行,根据这个步骤来肯定能用

1. 在项目下新建一个config.json文件

2. json文件中写入一些配置

3. vue.config.js中配置打包时把config.json文件copy到应用目录下

  pluginOptions:{electronBuilder:{nodeIntegration:true,builderOptions: {extraResources: [{ "from": "./config.json", "to": "../" }],nsis: {allowToChangeInstallationDirectory: true,oneClick: false,installerIcon: "./public/safeicon.ico", //安装logoinstallerHeaderIcon: "./public/safeicon.ico" //安装logo},win: {icon: './public/safeicon.ico' //打包windows版本的logo},productName: "APP", //应用的名称}}}

4. 修改 electorn 的入口文件 background.js 配置

  const mainWindow = new BrowserWindow({width: 800,height: 600,title: 'APPName',webPreferences: {nodeIntegration: true,  // 允许html页面上的javascipt代码访问nodejs 环境api代码的能力enableRemoteModule: true, // 是否允许使用remotecontextIsolation: false,// 加载本地图片webSecurity: false, // 允许跨域webviewTag: true // 允许webview},icon: "app://./safeicon.ico",show: false,autoHideMenuBar: true, // 隐藏顶部工具栏,生产环境时设置为trueframe: false // 无边框})

主要是开启这两个配置

      nodeIntegration: true,  // 允许html页面上的javascipt代码访问nodejs 环境api代码的能力
      enableRemoteModule: true, // 是否允许使用remote

5.  新增工具类 src\utils\getConfig.js

const path = window.require && window.require("path");
const fs = window.require && window.require("fs");
const electron = window.require && window.require('electron')export function getSystem() {//这是mac系统if (process.platform == "darwin") {return 1;}//这是windows系统if (process.platform == "win32") {return 2;}//这是linux系统if (process.platform == "linux") {return 3;}
}
/**** @returns 获取安装路径*/
export function getExePath() {// return path.dirname("C:");return path.dirname(electron.remote.app.getPath("exe"));
}
/**** @returns 获取配置文件路径*/
export function getConfigPath() {if (getSystem() === 1) {return getExePath() + "/config.json";} else {return getExePath() + "\\config.json";}
}
/*** 读取配置文件*/
export function readConfig() {return new Promise((res, rej) => {console.log("fs", fs)fs.readFile(getConfigPath(), "utf-8", (err, data) => {let config = ""if (data) {//有值config = JSON.parse(data)}res(config)})})
}

6. 使用读取配置

import { readConfig } from '@/utils/getConfig.js'if (process.env.NODE_ENV !== "development") {(async function () {const res = await readConfig()console.log(res);axios.defaults.baseURL = "http://"+res.ip+":"+res.port;})()
} else {axios.defaults.baseURL = "/api";
}

我此处是判断是否是开发环境,不是开发环境下就去读取 config.json 的配置。你们根据实际情况调整。

ctrl + shift + i 开启控制台查看配置已生效

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/412000.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件是什么?前端,后端,数据库

软件是什么? 由于很多东西没有实际接触,很难理解,对于软件的定义也是各种各样。但是我还是不理解,软件开发中的前端,后端,数据库到底有什么关系呢! 这个问题足足困扰了三年半,练习时…

【数据结构】八大排序之计数排序算法

🦄个人主页:修修修也 🎏所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 一.计数排序简介及思想 二.计数排序代码实现 三.计数排序复杂度分析 📌时间复杂度 📌空间复杂度 结语 一.计数排序简介及思想 计数排序(Cou…

7、DETR:基于Transformer的端到端目标检测

目录 一、论文题目 二、背景与动机 三、创新与卖点 四、具体实现细节 模型架构 简易代码 五、结论与展望 六、一些资料 一、论文题目 End-to-End Object Detection with Transformershttps://arxiv.org/abs/2005.12872 二、背景与动机 在计算机视觉领域,目标…

使用docker搭建LNMP架构

目录 环境准备 下载安装包 服务器环境 任务分析 nginx部分 建立工作目录 编写 Dockerfile 脚本 准备 nginx.conf 配置文件 生成镜像 创建自定义网络 启动镜像容器 验证nginx MySQL部分 建立工作目录 编写 Dockerfile 准备 my.cnf 配置文件 生成镜像 启动镜像…

如何利用SD-WAN升级企业网络,混合组网稳定性更高?

随着企业信息化的升级,传统网络架构已经无法满足企业复杂的、多样化的组网互联需求。 企业多样化的组网需求包括: 一是需要将各办公点互联起来进行数据传输、资源共享; 二是视频会议、ERP、OA、邮箱系统、云服务应用程序等访问需求&#xff…

F-Droid:开源Android应用的宝库

F-Droid:开源Android应用的宝库 引言 F-Droid是一个开源应用程序存储库,旨在为安卓用户提供自由、隐私和安全的应用程序。它最初于2010年由Ciaran Gultnieks创建,因为他认为Google Play Store上的应用程序不够透明和安全。F-Droid的目标是为…

elasticsearch[二]-DSL查询语法:全文检索、精准查询(term/range)、地理坐标查询(矩阵、范围)、复合查询(相关性算法)、布尔查询

ES-DSL查询语法(全文检索、精准查询、地理坐标查询) 1.DSL查询文档 elasticsearch 的查询依然是基于 JSON 风格的 DSL 来实现的。 1.1.DSL 查询分类 Elasticsearch 提供了基于 JSON 的 DSL(Domain Specific Language)来定义查…

码住!软件测试人员的基本有哪些?

在软件测试领域,许多人误以为软件测试只是简单的点点鼠标、看看屏幕就能完成。然而,软件测试的复杂性远不止于此。作为一名软件测试人员,你需要具备多项技能和素质来保证测试的有效性和质量。 打字技能可以事半功倍 打字是软件测试人员必备的…

[linux]使用libqrencode库生成二维码数据

一、需求 要将一段数据生成为二维码&#xff0c; 二、方案 使用linux标准库&#xff0c;通过libqrencode将需要写入的信息转为二维码图片数据。 三、实现 3.1编写c文件 #include <stdio.h> #include <stdlib.h> #include <qrencode.h> int main() {QRc…

Facebook广告优化

通过Facebook广告优化来提高产品销量&#xff0c;以下是一些步骤和技巧&#xff1a; 1、确定目标受众&#xff1a;在Facebook广告平台上&#xff0c;您可以根据性别、年龄、地理位置、兴趣爱好等多种因素来定义您的目标受众。通过细分目标受众&#xff0c;您可以更精准地将广告…

[足式机器人]Part2 Dr. CAN学习笔记- Kalman Filter卡尔曼滤波器Ch05

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记 - Kalman Filter卡尔曼滤波器 Ch05 1. Recursive Algirithm 递归算法2. Data Fusion 数据融合Covarince Matrix协方差矩阵State Space状态空间方程 Observation观测器3. Step by step : Deriatio…

jmeter-线程数设置为1,循环10次没问题,循环100次出现异常

一、多次尝试&#xff0c;发现出现异常的接口大致相同。 解决办法&#xff1a;在第一个出现异常的接口下添加超时时间&#xff0c;固定定时器&#xff1a;2000ms&#xff0c;再次运行就没问题了。 二、压力机自身存在的问题 1&#xff09;在网络编程中&#xff0c;特别是在短…