electron探索

_鹿鹿鹿

已于 2023-11-27 20:01:11 修改

阅读量1.2k

点赞数 2

分类专栏：跨平台文章标签： electron javascript 前端

于 2023-06-08 16:44:41 首次发布

本文链接：https://blog.csdn.net/hyszyl/article/details/131111194

版权

跨平台专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章详细描述了在使用Electron开发过程中，如何通过electronmon监听main.js变化并自动重启。在Windows和Linux上使用electron-builder打包时遇到的网络问题及解决方案，包括手动下载缺失的包并指定路径。此外，还提到了Webpack配置更改以解决资源加载失败的问题，以及在TypeORM中遇到的数据库同步、数据类型和约束错误，并提供了相应的解决策略。

摘要由CSDN通过智能技术生成

监听主进程electron文件变化

使用npm包electronmon，electron模板项目里面也有这个包，自动检测main.js的变化自动重启electron

使用方法：electronmon - npm

windows上使用electron-builder打包

网络问题参考：electron-builder打包过程中报错——网络下载篇_wincodesign-2.6.0.7z_程序边界的博客-CSDN博客

linux上使用electron-builder打包

1. 需要的包因为网络问题下不下来

遇到fpm1.9.3-2.3.1-linux-x86在github上下载不下来，在github上下好包以后要解压到~/.cache/electron-builder/fpm/fpm1.9.3-2.3.1-linux-x86目录下面（fpm1.9.3-2.3.1-linux-x86就是解压后的文件夹名）

2. 打好以后打开的程序白屏

1）问题一：not allowed to load local resource app.asar/build/index.html

解决：原因是build包没打进asar里面，package.json里面build增加一个"files"，因为我的electron的入口文件放在electron文件夹下面，所以要在这里引入。这个的作用感觉就是自己指定打哪些包，没加的时候是读的package.json配置的"main": "electron/main.js"。没加这个的时候能找到main.js，只加了./build后，找不到main.js

"build": {
"appId": "myledgerapp",
"extends": null,
// 下面的为增加的
"files": [
  "./build/**/*",
  "./electron/**/*"
]}

2）问题二：electron-builder failed to load resource: net::ERR_FILE_NOT_FOUND

问题一解决了，又来了问题二，配置webpack解决

在craco.config.js里面webpack -> configure -> webpackConfig.output -> publicPath:'./'

变成相对路径

3）问题三：Navigated to chrome-error://chromewebdata/

这个问题是在首页跳转到登录页出现的，排查了代码，发现是之前loadURL是用的localhost:3000/#/login，现在的host不是这个了

使用typeorm问题

1. 0.3版本后的一些写法跟之前不同，目前例子大部分是0.2的

2. 按照网上的例子，运行报错（可能是因为参考0.2的原因）

1）错误信息：EntityMetadataNotFoundError:No metadata for “n” was found

插入和查询操作均不行，原因是this.connection = new DataSource后执行this.connection.connect()或initialize()这些进行连接，这个方法是异步的，必须在.then里面再进行插入和查询

ps：connect()适合已有的表，initialize()适合创建新的表

2）错误信息：DataTypeNotSupportedError: Data type "RunnerLogId" in "n.RunnerLogId" is not supported by "sqlite" database

这个错误是在解决第一个错误时引发的，在entity里有个列是RunnerLogId，然后我在@Column()加了值，变成了@Column("RunnerLogId")，引号里应该写的是类型"int"，"text"这种

3）错误信息：QueryFailedError:SQLITE_CONSTRANT:NOT NULL constraint failed

原因是new DataSource配置了一个synchronize为true，改成false或删掉就可以了

3. 有可能用到的帮助

1）代码是用ts写的，用了webpack来转换成js，所以entity配置的时候，要考虑打包，如果不是直接引入单个entity的方式，而是以目录下文件的方式，可参考以下配置

const entitiesString =
  process.env.NODE_ENV == 'production'
    ? 'dist/src/**/entity/*.entity.js'
    : 'src/**/entity/*.entity.ts';
const migrationString =
  process.env.NODE_ENV == 'production'
    ? 'dist/src/migrations/*.js'
    : 'src//migrations/*.ts';
export const appDataSource = new DataSource({
  type: 'postgres',
  host: process.env.POSTGRES_DB_HOST,
  port: Number(process.env.POSTGRES_DB_PORT),
  username: process.env.POSTGRES_DB_USER,
  password: process.env.POSTGRES_DB_PASSWORD,
  database: process.env.POSTGRES_DB_DATABASE,
  synchronize: false,
  logging: true,
  entities: [entitiesString],
  migrationsRun: true,
  migrations: [migrationString],
});

2）若需要实体中处理数组或字符串使用以下代码：

@Column("text", { array: true })

kid_ages: string[];

node相关

1. 文件处理

node 处理有三种方式回调函数、promise、同步

回调没法封装新的方法返回回调的数据，write的同步报错的话会展示堆栈信息，promise报错信息跟回调的一样

注意点：

mkdir默认配置不能直接多级目录，要配置递归参数{ recursive: true }
writeFile只能用来创建文件，不能用来创建路径，所以要先调mkdir创建目录……
在根目录创建data文件夹用相对路径前面加./就可以（./data）

React相关

.d.ts不要乱用，里面不能直接写enum导出，因为.d.ts是动态运行时加载的

数据库相关（sqlite）

安装问题：

1.安装windows-build-tools 途中卡住无法安装的解决方法：

1）在用户temp文件夹（在文件地址栏输入%temp%回车）下找到最新的dd_installer_xxx.log文件，查看此文件内容，确保日志输出了Closing the installer with exit code 0

2）temp文件夹目录下创建一个dd_client_.log文件，内容为：Closing installer. Return code: 3010.

重新install就可以解决

复杂一点的sql，like的写法：

# 使用 find() 方法
const posts = await postRepository.find({
      where: { title: Like('%zadmei.com%') },
});

# 使用查询生成器
.where('post.title LIKE :title', { title: '%zadmei.com%' })