**
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文件则完成啦。