开源的地址:https://github.com/electron/electron-quick-start

一、运行

1. 安装依赖

cnpm install electron --save

cnpm install electron-packager --save

2. 在Build里引入官方的入口文件Main.js将其改为electron.js

3. 在package.json里加一条指令,启动electron

Vue打包桌面程序

 

4. npm run build

5. npm run electron_dev(如果是白屏,则需要更改config/index.js里build的绝对路径改为相对路径,然后在重新build一下,如果不想改就直接改index里的引用文件即可)

 Vue打包桌面程序

构建时间很长,而且用饿了么组件的反应很慢。只要能打开dist里的index.html就可以进行下一步了(如果打不开就关闭服务)

Vue打包桌面程序

 

 二、打包

1. 更改package.json,配置打包程序

Vue打包桌面程序

 参考文档:https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#electronversion


2. 打包程序 需要在dist目录里拿到package。然后找到入口Js文件,然后找到我们之前生成的index.html。手动赋值一个package.json

然后配置入口文件路径

 

Vue打包桌面程序

 Vue打包桌面程序

 

 

3. npm run electron_build

Vue打包桌面程序

 

这就是我们生成的exe打包程序,打开


Vue打包桌面程序

 

Vue打包桌面程序

 




相关文章:

  • 2021-05-12
  • 2022-12-23
  • 2021-12-10
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-06
  • 2021-08-06
猜你喜欢
  • 2022-12-23
  • 2021-09-13
  • 2021-04-06
  • 2021-10-04
  • 2022-01-21
  • 2021-12-15
相关资源
相似解决方案