使用Electron + Vue3 + python 来构建桌面应用程序

最近在研究electron框架的时候,我在想能不能使用python来开发electron的后端,然后在前端使用vue来开发,这样就可以使用python的强大功能来开发桌面应用程序了,于是我就开始了我的折腾

前端环境准备

1. 安装nodejs

   官网

   建议安装好以后使用淘宝镜像``

   如果出现RequestError: connect ETIMEDOUT 20.205.243.166:443可以优化一下网络连接再试试(20.205.243.166是GitHub的IP)

   

2. Vue Cli

   npm install @vue/cli -g
   npm install @vue/cli-service -g

3. 安装 Electron(全局安装)

   npm install -g electron

4. 可以输入下列指令来确保安装成功

   node -v # node版本
   vue -V # vue cli版本
   electron -v # electron版本

p.s. 如果使用PowerShell报错xxx : 无法加载文件 xxxxxxx，因为在此系统上禁止运行脚本。 可以使用管理员权限执行set-ExecutionPolicy RemoteSigned一劳永逸,或者每次在前面加上npx

前端项目创建

1. 创建一个vue项目

   vue create py-el-vue-demo
   cd py-el-vue-demo

   进去之后选择默认第一项(vue3)就行了

2. 使用 安装electron-builder

   vue add electron-builder

   这里我选择了默认最新版本(13.0.0)

3. 启动开发服务器

   npm run electron:serve

4. 打包

   npm run electron:build

   这时候,不出意料的话会报错:Error: error:0308010C:digital envelope routines::unsupported

   

   这是因为我使用了高版本的node.js的原因,可以选择降低nodejs的版本
   也可以修改打包参数:把项目的package.json中的"electron:build": "vue-cli-service electron:build",改为"electron:build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:build",

   打包完成后会在dist_electron目录下生成一个win-unpacked文件夹,里面就是打包好的程序

后端环境准备

这里我使用了FastApi来创建后端Demo

代码

前端

<template>
  <P>{{ msg }}</P>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      msg: '',
    }
  },
  mounted() {
    fetch("http://localhost:5000/")
      .then(response => response.text())
      .then(data => {
        console.log(data);
        this.msg = data;
      });
  }
}

</script>

后端

from flask import Flask
from flask_cors import cross_origin

app = Flask(__name__)


@app.route('/')
@cross_origin()
def hello_world():
    return 'Hello World!'


if __name__ == '__main__':
    app.run()

python打包为exe并且嵌入到electron项目中

pyinstaller -F -w app.py #我的python文件名为app.py

这时候会在当前目录下生成一个dist文件夹,里面就是打包好的exe文件

我把这个文件复制到了项目的/src/py目录下

为了让每次electron:build的时候自动复制这个文件夹下的文件,需要在根目录下创建一个叫electron-builder.json的文件,内容如下:

{
    "extraResources": [
        {
            "from": "src/py",
            "to": "py"
        }
    ]
}

接下来就要让electron启动的时候自动加载这个exe文件了

//导入从child_process中导入spawn函数
const { spawn } = require('child_process');
//导入path模块
const path = require('path');
let subprocess = null; // 用于存储子进程的引用

//启动外部程序
// 获取打包后的资源目录
const exePath = path.join(process.resourcesPath, 'py', 'app.exe');
subprocess = spawn(exePath);

// 子进程的输出会在这里捕获
subprocess.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});

subprocess.stderr.on('data', (data) => {
  console.error(`stderr: ${data}`);
});

subprocess.on('close', (code) => {
  console.log(`子进程退出，退出码 ${code}`);
  subprocess = null; // 当子进程退出时清除引用
});

注意:在开发环境(使用npm run electron:serve启动)的时候,由于没有打包,所以不会自动启动python程序