electron
2022-06-17 本文已影响0人
荣妮儿
接触electron时间并不长，研究了两种方法，具体操作记录。
第一种方式
由于业务需求，现在想实现上传文件夹获取本地磁盘的路径，经研究，用electron将现有的项目打包成electron能实现。关于electron打包vue项目的具体操作如下：
准备vue项目
在项目目录输入命令：vue add electron-builder
image.png
electron下载失败
vue add electron-builder 下载electron会下载失败，使用淘宝镜像下载：cnpm i electron
窗口运行
1、下载完成输入命令运行electron窗体 npm run electron:serve
2、窗体运行成功
打包exe
1、运行打包命令：npm run electron:build
image.png
注意：打包过程中，国内网络不稳定git下载容易失败，多试几次
参考链接：https://blog.csdn.net/michaelxuzhi___/article/details/106568543
2、打包完成后，项目目录下会多出一个dist_electron，打包出的exe即在其中，此exe需安装后使用
（mac电脑上是dmg的安装包）
windows上打包文件夹：
181655371886_.pic.jpg
mac上打包文件夹：
image.png
另外需要注意的一点是：electron项目路径不能有中文！！！
以上描述的是直接用electron打包vue项目，但是有很多功能需要自己实现，比如：热更新，window，mac打包区别等等
第二种方式
git下载项目模版
代码参考文章
Electron-Vue-template
这是一个基于 electron 的 vue 最基本的模板，其中前端技术栈则用到 vue 全家桶，axios 作为 http 请求，而本地数据库则是 nedb。现在合并了花裤衩的 vue-admin 中的东西侧栏样式是在
src/renderer/layout/components/sidebar文件夹中,大家可以根据需求进行个性化更改.
- 因为花裤衩大大的 ELECTRON 版本已经一年没有更新了,而且 ELECTRON,vue,elementui,都已经迭代太多,刚好我司有这方面的需求,我就在 vue-electron 脚手架生成的项目基础上,将花裤衩大大的项目核心组件提取出来合并到这个项目中，在我简单的封装了 axios 和 db．以及 electron 常用的信息弹窗，错误弹窗，具体文档地址：中文在线文档，国内访问地址。
请注意，在 2021 年 4 月 13 日的更新之后，将使用 esbuild 替换 babel，如对 babel 有强需求的小伙伴请勿更新。
-
vite 版本 electron-vite-template
-
react 版 Electron-react-template
<div align="center" >
<span>测试打包状态：</span>
<a href="https://github.com/umbrella22/electron-vue-template">
<img src="https://github.com/umbrella22/electron-vue-template/actions/workflows/build-test.yml/badge.svg">
</a>
</div>
请确保您的 node 环境是大于或等于 16
如何安装
npm config edit
# 该命令会打开npm的配置文件，请在空白处添加，此操作是配置淘宝镜像。
# electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
# electron_custom_dir={{ version }}
# electron_mirror=https://cdn.npmmirror.com/binaries/electron/v
# registry=https://registry.npmmirror.com/
# 然后关闭该窗口，重启命令行.
# 使用yarn安装
yarn or yarn install
# 启动之后，会在9080端口监听
yarn dev
# build命令在不同系统环境中，需要的的不一样，需要自己根据自身环境进行配置
yarn build
启动逻辑图
image.png
更新日志
package.json
可以根据build打包window和mac版本，还有热更新等功能
{
"name": "electron-vue-admin",
"version": "0.0.1",
"author": "sky <https://github.com/umbrella22>",
"description": "An electron-vue project",
"license": "MIT",
"main": "./dist/electron/main.js",
"scripts": {
"dev": "cross-env TERGET_ENV=development node .electron-vue/dev-runner.js",
"build": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && electron-builder",
"build:win32": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && electron-builder --win --ia32",
"build:win64": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && electron-builder --win --x64",
"build:mac": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && electron-builder --mac",
"build:dir": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=onlyClean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"pack:resources": "node .electron-vue/hot-updater.js",
"update:serve": "node server/index.js",
"dep:upgrade": "yarn upgrade-interactive --latest",
"postinstall": "electron-builder install-app-deps",
"package-win":"electron-packager ./ --platform=win32 --out ./dist --overwrite --ignore=node_modules --arch=x64"
},
"build": {
"asar": false,
"extraFiles": [],
"publish": [
{
"provider": "generic",
"url": "http://127.0.0.1"
}
],
"productName": "electron-vue-admin",
"appId": "org.Sky.electron-vue",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/logo.png"
},
"win": {
"icon": "build/icons/logo.ico",
"target": "nsis"
},
"linux": {
"target": "deb",
"icon": "build/icons"
}
},
"dependencies": {
"@googlemaps/js-api-loader": "^1.14.3",
"axios": "^0.27.2",
"electron-updater": "^5.0.1",
"express": "4.17.3",
"fs-extra": "^10.1.0"
},
"devDependencies": {
"@babel/core": "^7.17.12",
"@babel/eslint-parser": "^7.17.0",
"@babel/plugin-proposal-class-properties": "^7.17.12",
"@babel/plugin-proposal-decorators": "^7.17.12",
"@babel/plugin-proposal-do-expressions": "^7.16.7",
"@babel/plugin-proposal-export-default-from": "^7.17.12",
"@babel/plugin-proposal-export-namespace-from": "^7.17.12",
"@babel/plugin-proposal-function-bind": "^7.16.7",
"@babel/plugin-proposal-function-sent": "^7.17.12",
"@babel/plugin-proposal-json-strings": "^7.17.12",
"@babel/plugin-proposal-logical-assignment-operators": "^7.17.12",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.17.12",
"@babel/plugin-proposal-numeric-separator": "^7.16.7",
"@babel/plugin-proposal-optional-chaining": "^7.17.12",
"@babel/plugin-proposal-pipeline-operator": "^7.17.12",
"@babel/plugin-proposal-throw-expressions": "^7.16.7",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.17.12",
"@babel/preset-env": "^7.17.12",
"@babel/register": "^7.17.7",
"@babel/runtime": "^7.17.8",
"@types/fs-extra": "^9.0.13",
"@types/node": "^14.14.41",
"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
"@vue/babel-preset-jsx": "^1.2.4",
"adm-zip": "^0.5.9",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5",
"cfonts": "^2.10.0",
"chalk": "^4.1.2",
"copy-webpack-plugin": "^10.2.4",
"core-js": "^3.22.5",
"cross-env": "^7.0.3",
"css-loader": "^6.7.1",
"date-fns": "^2.28.0",
"del": "^6.1.0",
"electron": "17.2.0",
"electron-builder": "^23.0.3",
"electron-devtools-installer": "^3.2.0",
"element-ui": "^2.15.8",
"esbuild-loader": "^2.19.0",
"eslint": "^7.32.0",
"eslint-config-standard": "^14.1.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-plugin-html": "^6.2.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-standard": "^5.0.0",
"eslint-webpack-plugin": "^3.1.1",
"extract-zip": "^2.0.1",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "2.6.0",
"multispinner": "^0.2.1",
"node-loader": "^2.0.0",
"nprogress": "^0.2.0",
"portfinder": "^1.0.28",
"postcss": "^8.4.13",
"postcss-loader": "^6.2.1",
"sass": "^1.51.0",
"sass-loader": "^12.6.0",
"style-loader": "^3.3.1",
"svg-sprite-loader": "^6.0.11",
"terser-webpack-plugin": "^5.3.1",
"vue": "^2.6.14",
"vue-html-loader": "^1.2.4",
"vue-i18n": "^8.27.1",
"vue-loader": "^15.9.8",
"vue-router": "^3.5.3",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.14",
"vuex": "^3.6.2",
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0",
"webpack-hot-middleware": "^2.25.1",
"webpack-merge": "^5.8.0"
}
}
