Electron+Vue+pyinstaller服务打包

electron环境安装略

  1. electron的入口文件配置test.js, 需要在package.json 配置文件中指定main: src/test.js

    const { app, BrowserWindow } = require('electron')

    const createWindow = () => {
    const win = new BrowserWindow({
    width: 800,
    height: 600
    })

    // win.loadFile('index.html')

    // 下面的url为自己启动vite项目的url。
    // win.loadURL('http://127.0.0.1:28087/')

    复制代码
     // 在窗口内要展示的内容为 ./dist/index.html,即打包生成的index.html
    
     // mainWindow.loadURL(url.format({
    
     //   pathname: path.join(__dirname, './dist', 'index.html'),
    
     //   protocol: 'file:',
    
     //   slashes: true
    
     // }));
     win.loadFile('./dist/index.html')
    
     // 自动打开调试台

    mainWindow.webContents.openDevTools({

    复制代码
     detach: true

    });

    }

    app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
    })

    app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
    app.quit()
    }
    })

  2. vue文件单独打包,命令: npm run build, test.js文件在src下, 然后将vue打包的dist文件,需要手动拷贝到src下

  3. 打包electron 命令: electron-builder

关于python服务打包运行, 不需要部署python环境的方式

1.安装依赖, pip install pyinstaller

2.打包服务pyinstaller yourscript.py

具体参见 https://blog.csdn.net/weixin_40025666/article/details/131191945

将py打包程序嵌入到electron启动脚本中, 并将py打包的应用包依赖包复制到/app下

复制代码
app.on('ready', async () => {
  // 启动服务器exe
  try{ cmd.run(`./app/app.exe`,function(err, data, stderr){
    console.log(data)
    console.log(err)
    console.log(stderr)
  });}
  catch(e){
    console.log(e)
  }

 

  createWindow()
})

其中cmd.run命令需要node安装

npm install node-cmd --save

并在js中引入 const cmd = require('node-cmd');


  1. js本地调试, 运行node js文件即可

  2. 除了node_cmd, 还可以使用组件chile_process调用exe

    var child_process = require('child_process');
    child_process.exec(start cmd.exe /K ping 127.0.0.1);

3.eletron需要打包带进去的文件, 以及文件路径

复制代码
​
var child_process = require('child_process');
child_process.exec(`start cmd.exe /K ping 127.0.0.1`);

​
相关推荐
candyTong5 小时前
一觉醒来,大模型就帮我排查完页面性能问题
前端·javascript·架构
玩嵌入式的菜鸡6 小时前
网页访问单片机设备---基于mqtt
前端·javascript·css
前端一小卒6 小时前
我用 Claude Code 的 Superpowers 技能链写了个服务,部署前差点把服务器搞炸
前端·javascript·后端
阿丰资源9 小时前
SpringBoot+Vue实战:打造企业级在线文档管理系统
vue.js·spring boot·后端
豹哥学前端10 小时前
用猜数字游戏,一口气掌握 JavaScript 核心知识点(附完整代码)
前端·javascript
忆往wu前10 小时前
从0到1一步步拆解搭建,梳理一个 Vue3 简易图书后台全开发流程
前端·javascript·vue.js
shao91851611 小时前
第3章(2)——使用Gradio JavaScript Client
javascript·node.js·cdn·gradio·job·events·playcode
光影少年11 小时前
大屏页面,一次多个请求,请求加密导致 点击 全局时间选择器 时出现卡顿咋解决(面板收起会延迟1~2秒)
前端·javascript·vue.js·学习·前端框架·echarts·reactjs
Mr.mjw11 小时前
vue中封装一个环形进度条组件,根据外部盒子大小自适应变化
前端·javascript·vue.js
无心使然11 小时前
Openlayers调用ArcGis影像服务之一动态地图、地图切片(/exportImage)
前端·javascript·数据可视化