【electron】判断当前进程是否是开发环境的五种方案（获取一些资源的路径）

导读

以下内容在https://gitee.com/zkyt/electron-vue-element-admin上做的。

需求

electron作为一个客户端应用，往往需要处理配置文件，开发环境和生产环境的目录有些不同，我们需要判断当前环境，来读取不同目录的配置。

开发环境

	版本号	描述
文章日期	2022-11-20
操作系统	Win11-22H2	内部版本号22621.674
nvm version	1.1.9
node -v	v12.22.12	npm -v （6.14.16）
electron	@16.2.8	npm list
electron-builder	22.4.1

判断是否是开发环境

方案一：location.protocol

开发环境中：location.protocol == 'http:'。

方案二：全局变量__static

开发环境全局变量__static包含node_modules目录。

方案三：全局变量process.resourcesPath

开发环境全局变量process.resourcesPath包含node_modules目录。

方案四：全局变量process.env.WEBPACK_DEV_SERVER

开发环境全局变量process.env.WEBPACK_DEV_SERVER值为'true'。

方案五：app.isPackaged

const { app } = require(‘electron’)
这个app只能在Main进程使用，Render进程要使用的话，需要设置通过一些技术手段设置进来（如preload.js），这里不详细展开了。

参考资料：https://www.electronjs.org/zh/docs/latest/api/app

获取配置目录

从上面各种方案中，我们可以看出，方案三最适合获取配置目录。
代码如下：

function get_data_path() {
	let idx = process.resourcesPath.indexOf('\\node_modules\\');
  if (idx == -1) {
    // 生成环境
    return process.resourcesPath + '\\..\\_data\\';
  } else {
    // 开发环境
    return process.resourcesPath.substring(0, idx) + '\\_data\\';
  }
}
get_data_path();

效果如下：

参考资料

• 代码地址： https://gitee.com/zkyt/electron-vue-element-admin
• 【electron】 打包应用修改图标和进程名字 https://blog.csdn.net/kinghzking/article/details/127952519