完整版 [vue 配置electron]

news2024/11/15 23:45:42

vue 配置electron，使用make 进行打包

1. 安装依赖 yarn install

2. 在根目录新建文件夹 electron

3. package.json 文件里添加

"name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT",

4. 安装electron npm install --save-dev electron

npm install --save-dev electron

cnpm install --save-dev electron

5. 在package.json 配置文件中的添加：

{
"scripts": {
"start": "electron ."
}
}

6. 在electron文件夹中创建三个文件（index.html、main.js、preload.js）

创建index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

创建main.js

const { app, BrowserWindow } = require('electron')
const path = require('node:path')
const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
    //   将此脚本(preload)附加到渲染器流程
      webPreferences: {
        preload: path.join(__dirname, 'preload.js')
      }
    })
  
    win.loadURL('http://localhost:3000')
    // win.loadFile('./electron/index.html')
    // win.webContents.openDevTools()
  }
  app.whenReady().then(() => {
    createWindow()

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

  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })

创建preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

7. 安装 concurrently

npm install concurrently

cnpm install concurrently

安装好配置package.json

"start": "concurrently vite \"electron .\""

8. 安装 nodemon实现热更新

npm i nodemon -D

cnpm i nodemon -D

"start": "concurrently vite \"nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue\""

9. npm start 运行，测试是否成功

10. 打包

npm install --save-dev @electron-forge/cli
cnpm install --save-dev @electron-forge/cli

npm i electron-squirrel-startup 
cnpm install electron-squirrel-startup --save

npx electron-forge import

安装成功可以在package.json 中看到下面这些

"scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
....
 "devDependencies": {
    "@electron-forge/cli": "^7.4.0",
    "@electron-forge/maker-deb": "^7.4.0",
    "@electron-forge/maker-rpm": "^7.4.0",
    "@electron-forge/maker-squirrel": "^7.4.0",
    "@electron-forge/maker-zip": "^7.4.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
    "@electron-forge/plugin-fuses": "^7.4.0",
    "@electron/fuses": "^1.8.0",
  }

如果devDependencies里面的这些没有，那咱可以复制手写进去，然后 npm i 就好。

开始分发

cnpm run package

cnpm run make

npm run make 报错

解决方法：
原因是没有配置 forge.config.js ，在根目录新增forge.config.js【这个文件按理说是自动生成的，但是我没有，不晓得为啥】

const { FusesPlugin } = require('@electron-forge/plugin-fuses')
const { FuseV1Options, FuseVersion } = require('@electron/fuses')

module.exports = {
 packagerConfig: {
   asar: true,
 },
 rebuildConfig: {},
 makers: [
  {
   name: '@electron-forge/maker-squirrel',
   config: {
    certificateFile: './cert.pfx',
    certificatePassword: process.env.CERTIFICATE_PASSWORD
   },
  },
  {
   name: '@electron-forge/maker-zip',
   platforms: ['darwin'],
  },
  {
   name: '@electron-forge/maker-deb',
   config: {},
  },
  {
   name: '@electron-forge/maker-rpm',
   config: {},
  },
 ],
 plugins: [
  {
   name: '@electron-forge/plugin-auto-unpack-natives',
   config: {},
  },
  // Fuses are used to enable/disable various Electron functionality
  // at package time, before code signing the application
  new FusesPlugin({
   version: FuseVersion.V1,
   [FuseV1Options.RunAsNode]: false,
   [FuseV1Options.EnableCookieEncryption]: true,
   [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
   [FuseV1Options.EnableNodeCliInspectArguments]: false,
   [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
   [FuseV1Options.OnlyLoadAppFromAsar]: true,
  }),
 ],
}

然后再运行