Electron+vue

1、安装报错

RequestError: connect ETIMEDOUT 20.205.243.166:443

解决：

1.npm config edit 打开配置文件

2.修改配置

electron_mirror=https://npm.taobao.org/mirrors/electron/
python=D:\python3.7.5\python.exe
sass_binary_site=https://npm.taobao.org/mirrors/node-sass

3.安装

npm install electron --save || yarn add electron --save

npm install concurrently --save-dev  ||  yarn add concurrently --save-dev  并行地运行多个命令

yarn add electron-builder --dev  ||  npm install electron-builder --save-dev

4.vue项目一起使用

增加入口，根目录设置electron文件夹新建main.js

main.js

// electron/main.js
import { app, BrowserWindow, Menu, screen } from "electron"
// 是否是生产环境
const isPackaged = app.isPackaged;

// 禁止显示默认菜单
Menu.setApplicationMenu(null);

// 主窗口
let mainWindow;

const createWindow = () => {
  // 创建浏览器窗口
  mainWindow = new BrowserWindow({
    // 默认窗口标题，如果由loadURL()加载的HTML文件中含有标签<title>，此属性将被忽略。
    title: "Electron + Vue3",
    // width: 800,
    // height: 600,
    // 设置窗口尺寸为屏幕工作区尺寸
    width: screen.getPrimaryDisplay().workAreaSize.width,
    height: screen.getPrimaryDisplay().workAreaSize.height,
    // 设置最小尺寸
    minWidth: 800,
    minHeight: 600,
    // 窗口图标。 在 Windows 上推荐使用 ICO 图标来获得最佳的视觉效果, 默认使用可执行文件的图标.
    // 在根目录中新建 build 文件夹存放图标等文件
    // icon: path.resolve(__dirname, "../build/icon.ico"),
  });

  // 开发环境下，打开开发者工具。
  if (!isPackaged) {
    mainWindow.webContents.openDevTools();
  }

  // 使用 loadURL 加载 http://localhost:3004 ，也就是我们刚才创建的 Vue 项目地址
  // 3004 改为你 Vue 项目的端口号
  mainWindow.loadURL("http://localhost:5173/");
    // mainWindow.loadFile("dist/index.html");
  // 如果使用了 nginx 代理，url 改为代理地址
//   mainWindow.loadURL("https://example.com/");
};

// 在应用准备就绪时调用函数
app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

// 如果开发环境使用了 nginx 代理，禁止证书报错
if (!isPackaged) {
  // 证书的链接验证失败时，触发该事件
  app.on(
    "certificate-error",
    function (event, webContents, url, error, certificate, callback) {
      event.preventDefault();
      callback(true);
    }
  );
}

配置package.json

{
  "name": "vue-project-ele",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "main": "electron/main.js",
  "author": "taotao",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test:unit": "vitest",
    "electron:dev": "concurrently \" yarn dev \"  \"yarn electron .\"",
    "electron:build": "npm run build && electron-builder"
  },
  "build":{
    "appId": "your.id",
    "productName": "Electron + Vue3 开发桌面应用",
    "copyright": "Copyright © year ${author}",
    "directories": {
      "output": "app_client"
    },
    "mac": {
      "category": "public.app-category.music",
      "icon": "public/favicon.ico",
      "target": [
        {
          "target": "dmg",
          "arch": [
            "x64"
          ]
        },
        {
          "target": "zip",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "win": {
      "icon": "public/favicon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "public/favicon.ico",
      "uninstallerIcon": "public/favicon.ico"
    }
  },
  "dependencies": {
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "electron": "^28.1.1",
    "@vitejs/plugin-vue": "^4.5.2",
    "@vue/test-utils": "^2.4.3",
    "concurrently": "^8.2.2",
    "electron-builder": "^24.9.1",
    "jsdom": "^23.0.1",
    "vite": "^5.0.10",
    "vitest": "^1.0.4"
  }
}

main需要指向electron/main.js  如果没有的话则会报找不到app

运行看是否正常 yarn electron:dev

 

 如果报 const stripAnsi = require('strip-ansi');    Error [ERR_REQUIRE_ESM]: require() of ES Module 。。。not supported 这个错可能是vue项目命令导致的

如果是创建vite项目推荐使用npm create vue@latest 不用npm init vue@latest

 

测试打包 修改指向位置  指向dist

 mainWindow.loadFile("dist/index.html");   

如果使用url则使用loadUrl  mainWindow.loadURL("http://xxxxx:8003/");

打包完成后将dist文件夹移到exe平级即可。

 点击exe查看是否正常