Electron + Vue3 +Ant Design Vue 桌面应用从项目搭建到打包发布

1.技术栈介绍

electron

electron使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序

官网: https://www.electronjs.org/

vue3

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

官网: https://v3.cn.vuejs.org/guide/introduction.html

Ant Design of Vue

是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

官网: https://www.antdv.com/docs/vue/introduce

项目环境

2. 项目搭建

命令窗口程序为: cmder 可以使用系统自带powershell

yarn 设置淘宝源

yarn config set registry https://registry.npm.taobao.org -g 
yarn config set disturl https://npm.taobao.org/dist -g 
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g 

2.1 创建项目

yarn create vite
.....配置项目名称和vue-ts风格
√ Project name: ... ov-client
√ Select a framework: » vue
√ Select a variant: » vue-ts

切换项目目录, 运行项目

cd ov-client
yarn
yarn dev

2.2 安装ant design vue

vscode打开项目, 打开终端端口(顶部菜单栏 Terminal-> New Terminal )

yarn add ant-design-vue

配置antd按需加载

yarn add unplugin-vue-components --dev

修改vite.config.ts 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//++
import ViteComponents from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //++
    ViteComponents({
      resolvers: [
        AntDesignVueResolver(),
      ],
    }),
  ]
})

注意: 你可以使用 [unplugin-vue-components] 来进行按需加载。但是此插件无法处理非组件模块，如 message，这种组件需要手动加载：

import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib

测试ant-design-vue 是否正常

修改在项目src/App.vue

<script setup lang="ts">
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <p>Vue3 + Ant Design Vue3 演示项目</p>
  <a-button  type="primary">测试ant-design-vue 按钮</a-button>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.3 安装electron及工具包

yarn add electron --dev
yarn add wait-on  --dev //监控端口
yarn add cross-env --dev //

安装成功package.json 如下

{
  "name": "ov-client",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "ant-design-vue": "^3.1.1",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "cross-env": "^7.0.3",
    "electron": "^18.0.4",
    "typescript": "^4.5.4",
    "unplugin-vue-components": "^0.19.3",
    "vite": "^2.9.2",
    "vue-tsc": "^0.29.8",
    "wait-on": "^6.0.1"
  }
}

2.3.1 配置package

添加electron启动命令和入口文件

  ...
  "main": "electron/main.js",
  "scripts": {
   ...
    "electron:dev": "wait-on tcp:3000 && cross-env NODE_ENV=development  electron ./",
  },

2.3.2 项目根创建 electron目录, 新建main.js 和 preload.js

main.js

const { app, BrowserWindow, Menu, MenuItem } = require("electron");
const path = require("path");
const NODE_ENV = process.env.NODE_ENV;

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 980,
    height: 680,
    // transparent: true,
    // fullscreen: true,
    // frame: false,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });


  if (NODE_ENV === "development") {
    mainWindow.loadURL("http://localhost:8080/");
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadURL(`file://${path.join(__dirname, "../dist/index.html")}`);
  }
}

// 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();
});

// 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();
});

proload.js

//允许vue项目使用 ipcRenderer 接口, 演示项目中没有使用此功能
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("ipcRender", ipcRenderer);

2.3.3 测试electron

yarn electron:dev

3.项目打包

安装打包工具 electron-builder

yarn add electron-builder --dev

package.js 配置打包命令, 先打包vue项目再用electron-builder打包dist目录

  "scripts": {
    ...
    "electron:build": "vue-tsc --noEmit && vite build && electron-builder",
  },
  "build": {
    "productName": "ovClient",
    "appId": "com.lvais",
    "copyright": "2022@sentangle",
    "directories": {
      "output": "output"
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true
    },
    "linux": {}
  },

3.1 先打包vue3项目

yarn build

# 如果提示错误, 请设置tsconfig.json中 compilerOptions.isolatedModules= false
node_modules/@vue/reactivity/dist/reactivity.d.ts:26:15 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

3.2 electron-builder打包

yarn electron:build

打包成功了, output 生产文件

点击win-unpacked/vmClient.exe 显示以下窗口说明成功了

4 常见问题

4.1 electron-builder打包后页面空白?

页面中js等资源路径不正确, 请配置 vite.config.ts 中base

export default defineConfig({
  base:"./",
})

4.2 打包过慢, 请配置yarn的淘宝源

yarn

yarn config set registry https://registry.npm.taobao.org -g 
yarn config set disturl https://npm.taobao.org/dist -g 
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g 

4.3 window 无法打包linux安装包

请将项目移植到linux系统下进行打包