electron应用开发（electron-quick-start + vuecli + 生成PC客户端）完美无bug

**

electron应用开发（electron-quick-start + vuecli + 生成PC客户端）完美无bug

1. 简介

electron: 用html开发跨平台的桌面应用
官网 https://www.electronjs.org/
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
vuecli：常用的前端脚手架工具

2. 启动electron-quick-start

2.1 下载最新版的electron快速启动示例代码，

https://github.com/electron/electron-quick-start
下载到你本地的目录即可，我的地址是：D:\q

2.2 用开发工具打开

//安装工程，速度很慢，建议用cnpm install
//cnpm install安装时有时会报某个版本不存在，需要手动指定一个版本cnpm

install electron@17.0.0
npm install

//启动工程

npm start

2.3 使用自己的页面

修改main.js

//执行我们自己的一个静态页面
mainWindow.loadFile('html/index.html')

3. VUECLI 工程

3.1 省略vuecli工程的插件

3.2 vuecli工程的打包

//在工程的根目录下新建vue.config.js文件
//文件内容, 用相对路径打包的意思

module.exports = {
    publicPath: './'   
}

//打一个生产的包
npm run build

3.3 把生产的文件夹dist复制到electron目录下

//修改main.js
mainWindow.loadFile('dist/index.html')

//启动electron工程
npm start

4. 桌面应用打包

4.1 我们使用electron-packager来打包，参考

https://www.npmjs.com/package/electron-packager
//安装electron-packager
npm install electron-packager

4.2 打包

npm i electron-packager

换一个镜像，加快速度

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/

//执行打包命令
electron-packager ./ demo --overwrite --platform=win32 --asar --out=OutApp --app-version=0.0.1

//打开工程根目录下的OutApp, 打开里面的文件夹运行应用

双击exe文件则完成啦。