运维随录实战（11）之将vue2项目制作成桌面应用程序

最新推荐文章于 2024-08-29 10:36:05 发布

爱编程的Loren

最新推荐文章于 2024-08-29 10:36:05 发布

阅读量736

点赞数 8

分类专栏：运维文章标签：运维

本文链接：https://blog.csdn.net/qq_35255384/article/details/136571482

版权

运维专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文详细介绍了如何安装Node环境，管理版本，创建并配置一个用于打包的Electron项目，包括设置index.html、package.json等文件，并指导如何使用`npm`和`electron-forge`进行项目打包。特别提到了node版本管理和打包命令的具体步骤。

摘要由CSDN通过智能技术生成

1，安装node环境

注意 node和npm版本关系，可以使用nvm包管理工具

2，创建专门用来打包的electron项目

mkdir my-electron-app && cd my-electron-app

npm init

安装所需要的依赖包

npm install electron --save-dev

在根目录下一般会有如下文件，没有的话需要自行创建：

index.html、package.json、main.js、preload.js、render.js

index.html代码：

<!DOCTYPE html>
<html>
  <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'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <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>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

package.json代码参照：

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "@electron-forge/cli": "^6.1.1",
    "@electron-forge/maker-deb": "^6.1.1",
    "@electron-forge/maker-dmg": "^6.1.1",
    "@electron-forge/maker-rpm": "^6.1.1",
    "@electron-forge/maker-squirrel": "^6.1.1",
    "@electron-forge/maker-wix": "^6.1.1",
    "@electron-forge/maker-zip": "^6.1.1",
    "electron": "^24.4.1"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0",
    "yarn": "^1.22.19"
  }
}

main.js代码：

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('./dist/index.html') 

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// 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.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // 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()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

preload.js代码：

/**
 * The preload script runs before. It has access to web APIs
 * as well as Electron's renderer process modules and some
 * polyfilled Node.js functions.
 *
 * https://www.electronjs.org/docs/latest/tutorial/sandbox
 */
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

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

render.js代码：

/**
 * This file is loaded via the <script> tag in the index.html file and will
 * be executed in the renderer process for that window. No Node.js APIs are
 * available in this process because `nodeIntegration` is turned off and
 * `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
 * to expose Node.js functionality from the main process.
 */

3，将自己的项目先进行打包，生成dist目录文件

# 注意node的版本，我的项目用的10.16.0，执行完后会看到生成的dist目录文件 npm run build

4，将dist目录文件整个拷贝到上面创建的electron项目中，然后通过electron forget打包

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

npx electron-forge import

执行打包命令：npm run make

注：dmg文件需要使用macos电脑才能生成，windows生成不了