在vue2.0 项目中集成 Electron 实现桌面端应用

在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,双击执行即可。