Electron结合vue3 打包

请先学习
前端小白安装node、vue、Express、Electron及(Electron桌面端exe应用开发)

四、Electron结合vue3 打包

(一)、开发环境

1. node.js环境

参考 ：前端小白安装node、vue、Express、Electron及(Electron桌面端exe应用开发)

https://blog.csdn.net/weixin_45631815/article/details/140826053

2. Vue Cli安装

pnpm install -g @vue/cli

pnpm 如何安装见参考https://blog.csdn.net/weixin_45631815/article/details/140826053

3.全局安装 Electron

pnpm install electron -g

(二)、搭建vue环境

1.使用 vue-cli 搭建基础 vue框架

d：
vue create electron-hello

选择

Please pick a preset: (Use arrow keys)

Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features

Default ([Vue 3] babel, eslint)

成功后

Vue CLI v5.0.8
✨  Creating project in D:\electron-hello.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

🚀  Invoking generators...
📦  Installing additional dependencies...

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project electron-hello.
👉  Get started with the following commands:

 $ cd electron-hello
 $ pnpm run serve

2.启动项目

 cd electron-hello
 pnpm run serve

启动完成后

 App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.1.4.54:8080/

  Note that the development build is not optimized.
  To create a production build, run pnpm run build.

浏览器查看http://10.1.4.54:8080/

(三)、vue项目中添加 electron 模块

1.加入electron-builder

 vue add electron-builder

选择Electron Version ^13.0.0

📦  Installing vue-cli-plugin-electron-builder...

✔  Successfully installed plugin: vue-cli-plugin-electron-builder

? Choose Electron Version ^13.0.0

🚀  Invoking generator for vue-cli-plugin-electron-builder...
📦  Installing additional dependencies...


> electron-hello@0.1.0 postinstall D:\electron-hello
> electron-builder install-app-deps

  • electron-builder  version=22.14.13
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder

2. electron启动

执行pnpm run electron:serve （外网）

 DONE  Compiled successfully in 358ms                                                                           16:48:37

  File                      Size                                         Gzipped

  dist_electron\index.js    799.83 KiB                                   172.44 KiB

  Images and other types of assets omitted.
  Build at: 2024-08-08T08:48:37.451Z - Hash: 3f1de7e043df46e8e9ff - Time: 358ms

 INFO  Launching Electron...
Vue Devtools failed to install: Error: Loading extension at C:\Users\ASUS\AppData\Roaming\electron-hello\extensions\ljjemllljcmogpfapbkkighbhhppjdbg failed with: 'content_security_policy.extension_pages': Insecure CSP value "'wasm-unsafe-eval'" in directive 'script-src'.

(四)、electron+vue 项目修改

基础 vue 项目 我们可以发现在目录中多出一个 background.js 文件。

修改：

​ 1. BrowserWindow 修改窗口大小

​ 2. 关闭开发者工具 // if (!process.env.IS_TEST) win.webContents.openDevTools()

'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS3_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: 1120,
    height: 1090,
    minHeight: 700,
    minWidth: 1000,
    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,
      contextIsolation: !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(VUEJS3_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()
    })
  }
}

(五)、打包 electron 应用

pnpm run electron:build

成功输出

\  Bundling main process...

 DONE  Compiled successfully in 2445ms                                                                          16:57:21
  File                                   Size                                  Gzipped

  dist_electron\bundled\background.js    191.77 KiB                            59.66 KiB

  Images and other types of assets omitted.
  Build at: 2024-08-08T08:57:21.247Z - Hash: 727884008b2336040083 - Time: 2445ms

 INFO  Building app with electron-builder:
  • electron-builder  version=22.14.13 os=10.0.19045
  • description is missed in the package.json  appPackageFile=D:\electron-hello\dist_electron\bundled\package.json
  • author is missed in the package.json  appPackageFile=D:\electron-hello\dist_electron\bundled\package.json
  • writing effective config  file=dist_electron\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=13.6.9 appOutDir=dist_electron\win-unpacked
  • default Electron icon is used  reason=application icon is not set
  • building        target=nsis file=dist_electron\electron-hello Setup 0.1.0.exe archs=x64 oneClick=true perMachine=false
  • building block map  blockMapFile=dist_electron\electron-hello Setup 0.1.0.exe.blockmap
 DONE  Build complete!

如何失败请参考https://blog.csdn.net/weixin_45631815/article/details/140826053

(六)、借鉴文章

https://segmentfault.com/a/1190000040326098