由于公司需要,下一个项目需要做CS开发,技术选型分析后,选择了electron(Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架)
研究发现,electron与vue-cli3.0脚手架做了很好的融合,对于我们这种用惯了vue,以及elementUI这些UI框架的Web前端开发工程师来说,实在太友好了,不过,这是一门国外框架技术 ,不仅是环境搭建、安装、文档,都是比较难入手的,坑也比较多,今天捣鼓了一天,终于把框架、环境、打包什么的问题解决了,不断的百度,百度,再百度,在下班之际,把今天自己遇到的问题、安装步骤、解决方法,回顾了一遍,写了这篇博客,方便以后自己翻阅巩固,也为大家提供帮助!
准备环境:
1、nodejs
1、安装cnpm、yarn
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g yarn
2、修改yarn的镜像
yarn config set registry https://registry.npm.taobao.org -g
3、设置electron的yarn镜像(要不然安装依赖会出错)
- 打开C盘下的用户目录(mac就在用户目录下,需要显示隐藏文件),找到~/.yarnrc文件,将lastUpdateCheck 删掉:
- 添加 electron_mirror "https://npm.taobao.org/mirrors/electron/"
- lastUpdateCheck 1549116918628 # 删掉 删掉
4、开始搭建electron-vue
1、搭建vue-cli3.0的脚手架,脚手架搭建就不多说了。vue create myApp
2、进入根目录:vue add electron-builder
3、选择Electron版本。选择 “^9.0.0”(最新版)。
然后耐心等待安装完成。如果中间出现错误中断了,请重复此步骤。
安装完成后会自动在src目录下生成background.js并修改了package.json。
5、在src目录下新建background.js
'use strict'
import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
async function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
}
})
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
win.loadURL('app://./index.html')
}
}
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
process.on('SIGTERM', () => {
app.quit()
})
}
}
6、根目录下新建vue.config.js
1、注意:下方的icon图标,一定要不小于256x256的ico格式图标,否则打包出错
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
pluginOptions: {
electronBuilder: {
builderOptions: {
'appId': 'mzDemo.com',
'productName': 'mzDemo', // 项目名,也是生成的安装文件名,即mzDemo.exe
'copyright': 'amaosky Copyright © 2020', // 版权信息
'files': [
'./**/*'
],
'extraFiles': [ // 把指定的资源复制到程序根目录,即把server文件夹的内容复制到程序根目录,这里server文件夹下的内容相当于我的后台,我在background.js中有相应的处理。
'./server'
],
'directories': {
'output': './app_dist' // 输出文件路径
},
'win': { // win相关配置
'icon': './public/favicon.ico', // 图标,当前图标在根目录下,注意这里有两个坑
"requestedExecutionLevel": "requireAdministrator", //获取管理员权限
'target': [{
'target': 'nsis', // 利用nsis制作安装程序
'arch': [
'x64', // 64位
'ia32'
]
}]
},
'nsis': {
'oneClick': false, // 是否一键安装
'allowElevation': true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
'allowToChangeInstallationDirectory': true, // 允许修改安装目录
'installerIcon': './favicon.ico', // 安装图标
'uninstallerIcon': './favicon.ico', // 卸载图标
'installerHeaderIcon': './favicon.ico', // 安装时头部图标
'createDesktopShortcut': true, // 创建桌面图标
'createStartMenuShortcut': true, // 创建开始菜单图标
'shortcutName': 'mzDemo' // 图标名称(项目名称)
}
}
}
}
}
7、安装依赖包yarn install (别用npm、cnpm,有坑)
8、运行(此时mac下已经可以运行、打包了,windows下还有些依赖包的问题)
- 执行:npm run electron:serve 即可运行web端和app端
- 执行:npm run electron:build 即可打包 (mac下此时打包已经没有问题了,但是windos下打包问题还会有,主要是一些依赖包、nsis打包等问题)
8、windows打包环境解决,手动安装build环境依赖包(要不然太慢了,会失败)
到淘宝npm镜像官网https://npm.taobao.org/mirrors下载
根据安装的electron版本实际情况去解决。有很多版本的,自己注意,我也是直接npm run electron:build发现的这些问题
- 清除electron和electron-builder的cache缓存记录(删除文件夹中旧的缓存资源包)。
-
eledtron缓存资源地址:
~/AppData/Local/electron/Cache
-
electron-builder缓存资源地址:
~/AppData/Local/electron-builder/Cache
-
下载好缓存资源包后,存储到对应的cache文件中。
-
nsis,一样的步骤,根据npm run build的错误提示,去淘宝镜像找到对应的版本,替换到Cache里
9、windows打包
注意:整个项目下最好不要出现中文路径,否则打包会出问题。
到这个时候,windows下打包应该也没什么问题了,直接上图!