vue3+electron开发桌面应用程序，搭建环境

原创已于 2023-12-17 15:11:01 修改 · 498 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#electron #javascript #前端

于 2023-12-17 14:58:51 首次发布

本文详细介绍了如何在Windows11环境下，使用Vue5.0.8和Electron创建桌面应用，包括环境配置、Vue项目创建、electron集成、preload.js处理以及package.json和vue.config.js的修改，以实现Vue与Electron的有效通信。

vue+electron 开发桌面程序所采的坑，记录环境搭建建

环境：windows11 ，node：v18.16.1,npm:9.5.1，vue：5.0.8

1、创建一个 vue 项目

vue create vue-demo

特别提醒：在创建vue项目时，请一定要选择hash模式，否则将无法打包，因为electron不支持history模式！

2、安装 electron 最新版到 vue 项目中

2.1、安装electron

npm install electron --save

2.2、在根目录创建 electron 文件夹

2.2.1、在文件夹下创建 background.js（文件名自定义）

const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("node:path");

async function createWindow() {
  // 创建窗口.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),      
    },
  });

  
  mainWindow.loadURL("index.html"); 
  mainWindow.webContents.openDevTools();

}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。

下面注释代码需要填写，否则 vue 与 electron 通信将出错，直接使用require将出错，在vue页面中请使用：

const { ipcRenderer }=window.require("electron");


//发送方法
function sendmsg(){
   ipcRenderer.send("send-msg","i am a send message");
}


//在background.js文件中
//createwidow方法中，添加如下代码，监听接收到的传值 如关闭窗口，改变窗口等
ipcMain.on("send-msg", (a, b) => {
        //打印接收到的内容
		console.log(b);
});

const mainWindow = new BrowserWindow({

        width: 800,

        height: 600,

        webPreferences: {

            preload: path.join(\_\_dirname, "preload.js"),
            //以下两个参数必须设置，否则vue与electron通信时将出错

            nodeIntegration: true,  //非常重要

            contextIsolation: false, //非常重要

       },

});

2.2.2、如 electron 创建 preload.js 文件

// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
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]);
  }
});

3、修改 pakage.json 文件，

"main":"./electron/background.js",
"autor":"XX"，
"description": "kk",

4、修改 vue.config.js

防止vue打包后白屏

publicPath: "./",

5、添加 electron 打包程序

5.1 安装打包插件

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

在 background.js 文件开头处添加

//background.js文件开头添加  
const NODE_ENV = process.env.NODE_ENV;

以下代码添加到createwindow方法中


  // 如果是开发环境就把当前运行的web端口做成客户端预览
  // 如果是生产环境就把打包后的index做成客户端预览
  mainWindow.loadURL(
    NODE_ENV === "development"
      ? "http://localhost:8080"
      : `file://${path.join(__dirname, "../dist/index.html")}`
  );
  //正式打包时删除如下代码
  if (NODE_ENV === "development") {
    console.log("isdevelopment");
    // 打开开发工具
    mainWindow.webContents.openDevTools();
  } else {
    console.log("isproduction");
  }

好了创建完毕可以打包发布了

npm run make

附上完整的background.js文件

// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("node:path");
const NODE_ENV = process.env.NODE_ENV;

function createWindow() {
	// 创建窗口.
	const mainWindow = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			preload: path.join(__dirname, "preload.js"),
			nodeIntegration: true,
			contextIsolation: false,
		},
	});

	// 如果是开发环境就把当前运行的web端口做成客户端预览
	// 如果是生产环境就把打包后的index做成客户端预览
	mainWindow.loadURL(
		NODE_ENV === "development"
			? "http://localhost:8080"
			: `file://${path.join(__dirname, "../dist/index.html")}`
	);
	//正式打包时删除如下代码
	if (NODE_ENV === "development") {
		console.log("isdevelopment");
		// 打开开发工具
		mainWindow.webContents.openDevTools();
	} else {
		console.log("isproduction");
	}

	ipcMain.on("sendabout", (a, b) => {
		console.log(b);
	});
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
	createWindow();

	app.on("activate", () => {
		// 在 macOS 系统内, 如果没有已开启的应用窗口
		// 点击托盘图标时通常会重新创建一个新窗口
		if (BrowserWindow.getAllWindows().length === 0) createWindow();
	});
});

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on("window-all-closed", () => {
	if (process.platform !== "darwin") app.quit();
});

// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。

附上完整的pakage.json文件

{
  "name": "school",
  "version": "0.1.0",
  "private": true,
  "main": "./electron/background.js",
  "author": "qiuye",
  "description": "kka",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "vue-cli-service build && electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "electron-squirrel-startup": "^1.0.0",
    "fs": "^0.0.1-security",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@electron-forge/cli": "^7.2.0",
    "@electron-forge/maker-deb": "^7.2.0",
    "@electron-forge/maker-rpm": "^7.2.0",
    "@electron-forge/maker-squirrel": "^7.2.0",
    "@electron-forge/maker-zip": "^7.2.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "electron": "^28.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "plugin:prettier/recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

pakage.json 中 start为测试electron程序

先运行npm run server 然后运行 npm run electron.

但上诉影响效率所以就合并成一条命令

"start": "vue-cli-service build && electron-forge start",