vue2使用electron以及打包配置-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2使用electron以及打包配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.创建项目

vue create vue-project

2.安装electron

vue add electron-builder

会自动安装相关依赖

vue2使用electron以及打包配置,electon,vue.js,前端,javascript

安装成功后会在src下自动生成一个background.js文件就是相应的electron的配置信息

vue2使用electron以及打包配置,electon,vue.js,前端,javascript

'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'

// 在应用程序准备就绪之前，必须注册方案
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // 创建浏览器窗口。
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION//是否隔离渲染进程和主进程
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // 如果处于开发模式，则加载开发服务器的url
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    //未开发时加载index.html
    win.loadURL('app://./index.html')
  }
}

// 关闭所有窗口后退出。
app.on('window-all-closed', () => {
  //在macOS上，应用程序及其菜单栏很常见
  // 保持活动状态，直到用户使用Cmd+Q明确退出
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// 此方法将在Electron完成后调用
// 初始化，并准备创建浏览器窗口。
// 某些API只能在此事件发生后使用。
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // 安装 DevTools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

// 在开发模式下，应父进程的请求干净地退出。
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

以及package.json中的scripts中也会多出了几种运行或打包的命令

vue2使用electron以及打包配置,electon,vue.js,前端,javascript

运行项目：

npm run electron:serve

此时运行项目没有报错但是启的很慢

vue2使用electron以及打包配置,electon,vue.js,前端,javascript

将background.js中的这段代码注释掉就可解决启动慢的问题

vue2使用electron以及打包配置,electon,vue.js,前端,javascript

以上是创建项目以及最基本配置

下面讲讲常用配置以及打包相关配置

background.js里设置常用配置：通信、系统图标.......更多相关api可参考之前文章https://blog.csdn.net/m0_63701303/article/details/128683563

'use strict'
// app:控制应用程序的事件生命周期
// protocol:注册自定义协议并拦截基于现有协议的请求。
// BrowserWindow:创建和控制浏览器窗口（应用程序窗口）
// Tray:添加图标和上下文菜单到系统通知区
// Menu:创建原生应用菜单和上下文菜单。
//screen: 检索有关屏幕大小、显示器、光标位置等的信息
// ipcMain:从主进程到渲染进程的异步通信。
import { app, protocol, BrowserWindow, Tray, Menu, screen, ipcMain } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'

// 在应用程序准备就绪之前，必须注册方案
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])
//程序主窗口
let mainWindow = null;
async function createWindow() {
  let {
    width,
    height
  } = screen.getPrimaryDisplay().workArea;//自定义最大化窗口
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({
    width: width,
    height: height,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION//是否隔离渲染进程和主进程
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // 如果处于开发模式，则加载开发服务器的url
    await mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) mainWindow.webContents.openDevTools()
  } else {
    createProtocol('app')
    //未开发时加载index.html
    mainWindow.loadURL('app://./index.html')
  }
}
let path = require('path')
var iconPath = path.join(__dirname, '../public/favicon.ico');
if (!isDevelopment) { //如果是生产环境
  iconPath = path.join(__dirname, './favicon.ico');
}
// 设置托盘区菜单
var appTray = null
function setTray() {
  //设置菜单内容
  let trayMenu = [{
    label: '退出', //菜单名称
    click: function () { //点击事件
      app.quit();
    }
  }];
  // s
  //设置托盘区图标
  // let trayIcon = path.join(__dirname, '../public/favicon.ico');
  appTray = new Tray(iconPath);
  //设置菜单
  const contextMenu = Menu.buildFromTemplate(trayMenu);
  //设置悬浮提示
  appTray.setToolTip('xxxx系统');
  //设置
  appTray.setContextMenu(contextMenu);
  //点击图标
  appTray.on('click', function () {
    //显示主程序
    mainWindow.show();
  });
}
// on注册事件  send触发 
//ipcMain 通信模块
function addIpc() {

}
// 关闭所有窗口后退出。
app.on('window-all-closed', () => {
  //在macOS上，应用程序及其菜单栏很常见
  // 保持活动状态，直到用户使用Cmd+Q明确退出
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// 此方法将在Electron完成后调用
// 初始化，并准备创建浏览器窗口。
// 某些API只能在此事件发生后使用。
app.on('ready', async () => {
  // if (isDevelopment && !process.env.IS_TEST) {
  //   // 安装 DevTools
  //   try {
  //     await installExtension(VUEJS_DEVTOOLS)
  //   } catch (e) {
  //     console.error('Vue Devtools failed to install:', e.toString())
  //   }
  // }
  createWindow()
  setTray() //系统图表
  addIpc() //通信

})

// 在开发模式下，应父进程的请求干净地退出。
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

打包配置：创建vue.config.js


module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
            // 模板来源就是在public里面创建的入口文件名
            template: 'public/index.html',
            // 编译后在 dist文件夹中的输出文件名，可选项，省略时默认与模块名一致
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要时 <title><%= htmlWebpackPlugin.options.title %></title>
            title: '主窗口',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
    },
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.swpe.template",
                // "asarUnpack": [
                //     "./node_modules/java",
                //     "./node_modules/async",
                // ],
                "asar": "false",
                "productName": "template", //项目名，也是生成的安装文件名，即aDemo.exe
                "copyright": "Copyright © 2020", //版权信息
                "directories": {
                    "output": "./dist" //输出文件路径
                },
                "win": { //win相关配置
                    "icon": "./public/favicon.ico", //图标，当前图标在根目录下，注意这里有两个坑
                    "target": [{
                        "target": "nsis", //利用nsis制作安装程序
                        "arch": [
                            "x64", //64位
                            "ia32" //32位
                        ]
                    }]
                },
                "mac": {
                    "target": [
                        "dmg",
                        "zip"
                    ]
                },
                // "linux": {
                //     "icon": "./public/favicon.ico"
                // },
                "nsis": {
                    "oneClick": false, // 是否一键安装
                    "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
                    "allowToChangeInstallationDirectory": true, // 允许修改安装目录
                    "installerIcon": "./public/favicon.ico", // 安装图标
                    "uninstallerIcon": "./public/favicon.ico", //卸载图标
                    "installerHeaderIcon": "./public/favicon.ico", // 安装时头部图标
                    "createDesktopShortcut": true, // 创建桌面图标
                    "createStartMenuShortcut": true, // 创建开始菜单图标
                    "shortcutName": "demo", // 图标名称
                },
            }
        }
    }
}

运行npm run electron：build文章来源地址https://www.toymoban.com/news/detail-795856.html

到了这里，关于vue2使用electron以及打包配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！