从零开始的 electron 开发-项目搭建
SegmentFault
共 11625字，需浏览 24分钟
·
2021-03-05 13:23
本文搭建基于vue cli提供的vue-cli-plugin-electron-builder进行脚手架搭建。
electron的优点和缺点已经有各种分析了，这里不再多述，如果你是一个前端开发，想把现有页面转化成桌面软件，并且能有win，mac，linux的版本，那么electron不失为一个好的选择，当然一个多端的框架优缺点都是很明显的，既然想快速开发那么就得舍弃点东西，比如体积大小，性能等等。
开发前的准备
说到底electron本质上就是一个基于Chromium的应用，通俗点说，这个桌面软件就是一个浏览器，我们写的东西在浏览器中展示，是不是一下子就回到熟悉领域了，那么在开发前你得知道前端三驾马车 HTML, CSS 和 JavaScript，涉及到一些文件等的处理的话那么会有些许node的知识。
安装
`npm install -g @vue/cli
vue create electron-vue
# 自行选择vue版本，由于electron使用的是Chromium，那么我们可以不必考虑兼容性的问题，我这里直接选择vue3（看个人喜好）
cd electron-vue
vue add electron-builder
# 选择electron版本号，这里我选择的是`11.0.0`
# 安装完成之后会有`src/background.js`文件，`package.json`中会多出几条electron的build及serve命令
npm run electron:serve
# 稍等一会儿（Vue Devtools首次安装问题）会有一个桌面窗口出现，ok安装就完成啦，接下来我们对其进行改造。`
说明
改造前说明一下：electron开发和我们普通的开发有所不同，它是有两种进程的：主进程和渲染进程
主进程src/background.js：管理所有渲染进程（怎么配置桌面软件，怎么打开桌面软件，怎么相互通信等等）。 渲染进程：说得直白点就是网页（就是打开我们单页的网页）
改造
src目录改造
现在的结构如下：
├─src # 源码目录
│ ├─main # 主进程目录
│ │ └─index.js # 主进程入口
│ └─renderer # 渲染进程文件夹
│ ├─assets
│ ├─components
│ ├─App.vue
│ └─main.js # 渲染进程入口
添加 vue.config.js
在根目录新建vue.config.js，添加
module.exports = {
pluginOptions: {
electronBuilder: {
mainProcessFile: 'src/main/index.js', // 主进程入口文件
rendererProcessFile: 'src/renderer/main.js', // 渲染进程入口文件
mainProcessWatch: ['src/main'], // 检测主进程文件在更改时将重新编译主进程并重新启动
}
}
}
这里我们可以通过设置pages来修改其入口文件，并且这样还可以打包多页
module.exports = {
pages: {
index: {
entry: 'src/renderer/main.js',
template: 'public/index.html',
filename: 'index.html',
title: 'vue-cli-electron',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// loader: 'src/loader/main.js' // 多页loader页
},
pluginOptions: {
electronBuilder: {
mainProcessFile: 'src/main/index.js', // 主进程入口文件
mainProcessWatch: ['src/main'], // 检测主进程文件在更改时将重新编译主进程并重新启动
}
}
}
尝试分别运行web的serve、build及electron的serve、build，看是否能成功运行(打包可能会因为网络原因，下载electron包失败，如果未添加.npmrc请参考结尾补充)。
环境变量配置
.env # 本地开发
.env.dev # 打包dev
.env.test # 打包test
.env.prod # 打包prod
.env:
NODE_ENV=development
VUE_APP_ENV=development
VUE_APP_APPID=com.electron.electronVueDEV
VUE_APP_PRODUCTNAME=electron开发
VUE_APP_VERSION=0.0.1
BASE_URL=/
注：.env 的NODE_ENV设置development，其余打包的请设置production
NODE_ENV: webpack运行的模式
VUE_APP_ENV：我们自己使用的环境变量(通过这个判断我们是什么环境)，比如.env.test为VUE_APP_ENV=test，.env.prod为VUE_APP_ENV=production
VUE_APP_APPID：electron的appId配置，com.electron.electronVueDEV，com.electron.electronVueTEST，com.electron.electronVue
VUE_APP_PRODUCTNAME：electron的productName配置，electron开发，electron测试，···
VUE_APP_VERSION：electron的version配置
web的打包：
"build:dev": "vue-cli-service build --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode prod",
electron的打包：
"build:dev:win32": "vue-cli-service electron:build --mode dev --win --ia32",
"build:dev:win64": "vue-cli-service electron:build --mode dev --win --x64",
"build:test:win32": "vue-cli-service electron:build --mode test --win --ia32",
"build:test:win64": "vue-cli-service electron:build --mode test --win --x64",
"build:prod:win32": "vue-cli-service electron:build --mode prod --win --ia32",
"build:prod:win64": "vue-cli-service electron:build --mode prod --win --x64",
"build:dev:mac": "vue-cli-service electron:build --mode dev --mac",
"build:test:mac": "vue-cli-service electron:build --mode test --mac",
"build:prod:mac": "vue-cli-service electron:build --mode prod --mac",
环境变量检测及打包配置
添加config配置
const env = process.env
const config = {
host: '',
baseUrl: ''
}
Object.assign(config, env)
// if (env.NODE_ENV === 'development') {
// config.VUE_APP_ENV = 'test'
// }
if (config.VUE_APP_ENV === 'development') {
config.host = 'http://192.168.148.174:8080'
} else if (config.VUE_APP_ENV === 'test') {
config.host = 'http://192.168.148.175:8080'
} else if (config.VUE_APP_ENV === 'production') {
config.host = 'http://192.168.148.176:8080'
}
export default config
打包配置
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: (config) => { // 由于我们修改了渲染进程目录，修改'@'的alias
config.resolve.alias.set('@', resolve('src/renderer'))
},
builderOptions: {
appId: process.env.VUE_APP_APPID,
productName: process.env.VUE_APP_PRODUCTNAME,
extraMetadata: {
name: process.env.VUE_APP_APPID.split('.').pop(),
version: process.env.VUE_APP_VERSION
},
asar: true,
directories: {
output: "dist_electron",
buildResources: "build",
app: "dist_electron/bundled"
},
files: [
{
filter: [
"**"
]
}
],
extends: null,
electronVersion: "11.3.0",
extraResources: [],
electronDownload: {
mirror: "https://npm.taobao.org/mirrors/electron/"
},
dmg: {
contents: [
{
type: "link",
path: "/Applications",
x: 410,
y: 150
},
{
type: "file",
x: 130,
y: 150
}
]
},
mac: {
icon: "public/icons/icon.icns"
},
nsis: {
oneClick: false,
perMachine: true,
allowToChangeInstallationDirectory: true,
warningsAsErrors: false,
allowElevation: false,
createDesktopShortcut: true,
createStartMenuShortcut: true
},
win: {
target: "nsis",
icon: "public/icons/icon.ico",
requestedExecutionLevel: "highestAvailable"
},
linux: {
"icon": "public/icons"
},
publish: {
provider: "generic",
url: "http://127.0.0.1"
}
}
............
}
icons
yarn add -D electron-icon-builder
package.json添加
"icons": "electron-icon-builder --input=./public/icons/icon.png --output=public --flatten",
在public下新建icons文件夹，再把你的icon.png(512*512)放在里面，运行npm run icons就会在icons里面生成对应的图片了。
补充
评论