关于vue.js:ElectronVue3TypeScriptVite桌面应用程序项目初始化

初始化 vite 我的项目

yarn create vite todolist --template vue-ts

cd todolist
yarn
yarn dev

浏览器拜访 3000 端口

装置 Electron

yarn add -D electron electron-builder rimraf vite-plugin-electron electron-devtools-installer

如果感觉装置慢，能够改为淘宝镜像，或者根目录增加 .yarnrc 文件

registry "https://registry.npm.taobao.org/"

electron_mirror "https://npm.taobao.org/mirrors/electron/"
electron_builder_binaries_mirror "http://npm.taobao.org/mirrors/electron-builder-binaries/"

插件阐明

electron-builder：打包工具

rimraf：疾速删除文件或目录工具

vite-plugin-electron：vite 联合 electron 的库，对于这个插件能够参见 Vite 与 Electron 无缝连接

electron-devtools-installer：electron 开发工具

vite-plugin-electron 插件是将 vite 和 electron 联合在一起的，能够让咱们十分不便的联合 electron 和 vue，须要做一些指定的配置。

初始化 electron 我的项目

新建目录文件 electron-main/index.ts 主过程目录和文件、electron-preload/index.ts预加载目录和文件

// electron-main/index.ts
import {app, BrowserWindow} from 'electron';
import path from 'path';

const createWindow = () => {
  const win = new BrowserWindow({
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
      preload: path.join(__dirname, '../electron-preload/index.js'),
    },
  });

  if (app.isPackaged) {win.loadFile(path.join(__dirname, '../index.html'));
  } else {// Use ['ENV_NAME'] avoid vite:define plugin
    const url = `http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`;

    win.loadURL(url);
  }
};

app.whenReady().then(() => {createWindow();

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

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

须要留神引入的预加载文件应该是打包后的 js 文件，门路和 ts 文件门路雷同，只有类型改为 js 即可。

// electron-preload/index.ts
import os from 'os';

console.log(os.platform()); // 测试打印一下零碎平台

配置 vite-electron

tsconfig.json

在 tsconfig.json 中监听 electron 相干文件和提醒

"include": [..., "electron-main/**/*.ts", "electron-preload/**/*.ts"],

省略号是之前的配置，copy 前面一段代码粘贴即可

vite.config.ts 配置

配置主过程和预加载脚本地址

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import * as path from 'path';
import electron from 'vite-plugin-electron';
import electronRenderer from 'vite-plugin-electron/renderer';
import polyfillExports from 'vite-plugin-electron/polyfill-exports';

export default defineConfig({
  plugins: [vue(),
    electron({
      main: {entry: 'electron-main/index.ts',},
      preload: {
        // Must be use absolute path, this is the limit of rollup
        input: path.join(__dirname, './electron-preload/index.ts'),
      },
    }),
    electronRenderer(),
    polyfillExports(),],
  build: {emptyOutDir: false, // 必须配置，否则 electron 相干文件将不会生成 build 后的文件},
});

package.json 配置

{
  "name": "todolist",
  "private": true,
  "version": "0.0.0",
  "main": "dist/electron-main/index.js", // 减少
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "build-electron": "rimraf dist && vite build && electron-builder", // 减少
    "preview": "vite preview"
  },
}

次要是减少入口文件，因为 electron 还没有原生反对 ts，因而目前还是必须加载 js 文件，所以入口文件咱们配置为解析后的 js 文件门路：dist/electron-main/index.js，而后批改执行脚本，在 build-electron 命令中减少 electron-builder 打包命令。

electron-builder 打包配置

{
  ...,
  "build": {
    "appId": "com.electron.desktop",
    "productName": "ElectronVueVite",
    "asar": true,
    "copyright": "Copyright © 2022 XingXingZaiXian",
    "directories": {"output": "release/${version}"
    },
    "files": ["dist"],
    "mac": {"artifactName": "${productName}_${version}.${ext}",
      "target": ["dmg"]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": ["x64"]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    }
  }
}

运行调试

yarn dev

尝试 F12 调试看看，按了半天没有反馈，应该是没有关上配置，批改electron-main/index.ts

const createWindow = () => {
  ...
  // 最初增加一行代码
  win.webContents.openDevTools()};

热更，曾经关上了调试工具

且已打印了零碎平台

打包

yarn run build-electron

执行完后会生成两个目录：dist 和 release。dist 目录中生成的是前端打包文件，release 中生成的是 electron 打包文件，内容如下：

其中 win-uppacked 中生成的是无需装置的执行文件，将此目录间接压缩后就能够发送给他人，解压即可应用。todolist_0.0.0.exe 文件是安装包，关上会显示装置过程，执行完装置过程后在零碎的控制面板中的软件列表中能够看到该软件，也能够执行卸载。

结语

到这里，咱们的初始化我的项目就算完结了，置信你也能够疾速建设本人的第一个桌面应用程序。

本我的项目将继续更新，心愿你也继续关注。

我的项目地址

• https://gitee.com/javanx/todolist
• https://gitee.com/javanx/todolist-server