在vue2.0 项目中集成 Electron 实现桌面端应用:两种方式
第一种:
注意:该方法只适用于@vue/cli 3.0的方式创建的项目,即使用vue create project_name 创建的项目。
1、创建项目
目录结构如下:
2、添加electron相关依赖
在当前项目中安装electron相关工具
vue add electron-builder
下载可能会遇到网速问题报错,可提前在.npmrc 文件中增加如下配置:
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
3、安装完成后需要选用版本,默认选择13.0.0,回车选择。
4、安装完成后检查项目,会生成background.js和相关配置
5、根据上图中的命令可进行运行与打包
npm run electron:build // electron 打包方法
npm run electron:serve // electron 本地运行方法
第二种:
注意:该方法适用于@vue/cli 2.0的方式创建的项目,即使用vue init webpack project_name 创建的项目。
1、测试下 vue-cli 是否安装成功 , 运行命令
vue -V
2、创建项目
目录结构如下:
3、 修改 config/index.js
将 build 属性节点下的 assetsPublicPath 改成 "./"。
修改的目的是确保打包后外部引入的 js 和 css 文件路径正确,这样做好处是:我们可以直接在本地打开并访问打包后的文件。
4、控制台执行
进入vue项目根目录,执行以下命令:
npm run dev 启动项目
npm run build 打包完成后,项目中会生成 dist 文件夹,这也就是electron桌面应用内嵌的界面
5、安装 Electron 和 打包依赖(这里我用的是electron-packager)
同理,若网速较慢,可提前在.npmrc 文件中增加如下配置:
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
开始安装依赖 :
npm install --save-dev electron
npm install --save-dev electron-packager
安装后查看项目的 package.json 文件,可以看到这个两个依赖都已添加
6、Electron 主程序文件(主进程)
6.1> 首先在 Vue 项目根目录下创建一个 main.js 文件,它是 Electron 主程序入口,具体内容如下:
//const {app,BrowserWindow} = require('electron'); 另一种引入写法
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow() {
// 创建一个窗口,大小 800 * 600
mainWindow = new BrowserWindow({
width: 1200,
height: 600,
webPreferences:{
webSecurity: false,
nodeIntegration: true
}
});
// 在窗口内要展示的内容为 ./dist/index.html,即打包生成的index.html
// mainWindow.webContents.loadFile(__dirname+'./dist/index.html');
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './dist', 'index.html'),
protocol: 'file:',
slashes: true
}));
// 自动打开调试台
// mainWindow.webContents.openDevTools({detach: true });
mainWindow.on("closed",function(){
mainWindow = null;
})
}
//启动应用加载
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
})
app.on('activate', function () {
if (mainWindow === null) createWindow();
});
6.2> 编辑 Vue 项目的 package.json 文件
指明electron应用主文件入口(即上面添加的 main.js 文件)
"main": "main.js", //main项 改为 main.js
"scripts": {
"electron:start": "electron ./"
}
7、启动electron桌面应用
npm run build
npm run electron:start
8、项目打包分发
8.1、编辑 package.json 文件,在scripts项中增加:
"packager": "electron-packager ./ app --out ./bin --electron-version 13.0.1 --overwrite --icon=./static/img/icon.ico"
8.2、在项目文件夹下依次执行如下命令,进行编译并打包:
npm run build
npm run packager
打包成功后会在根目录下生成一个bin文件夹,里面app.exe,双击执行即可。