electron+vite+vue+ts项目搭建(一)-基础环境

1. Vite构建electron 项目

1.1 创建 Vite 项目

npm init vite@latest 

npm install
npm run dev 显示

1.2安装electron相关依赖

npm install electron -D
npm install electron-builder -D
npm install electron-devtools-installer -D
npm install vite-plugin-electron -D
npm install vite-plugin-electron-renderer -D

1.3 electron基础配置

1.3.1 electron/index.ts 文件

import { app, BrowserWindow } from 'electron'
import path from 'path'
 
// 定义全局变量，获取窗口实例
let win: BrowserWindow | null;
 
/**
 * 创建一个窗口
 */
const createWindow = () => {
  win = new BrowserWindow({
    webPreferences: {
      devTools: true,
      // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
      nodeIntegration: true,
      contextIsolation: false,
    }
  })

        win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)
    
}

app.whenReady().then(() => {
    createWindow() // 创建窗口
    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

1.3.2 vite.config.ts配置electron入口文件

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from "vite-plugin-electron";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        electron({
            entry: "electron/index.ts"
        })
    ]
})

配置后 dev启动应用，就不需要启动 Electron + Vite 了

1.3.3 修改package.json,去掉"type": “module”, 添加"main": “dist-electron/index.js”,

{
  "name": "electron-vite-vue",
  "private": true,
  "version": "0.0.0",
  "main": "dist-electron/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  /·····/
}

npm run dev运行项目

1.4 electron-builder打包配置

1.4.1 修改electron/index.ts 判断当前环境

const createWindow = () => {
    win = new BrowserWindow({
        webPreferences: {
            devTools: true,
            nodeIntegration: true,
            contextIsolation: false,
        }
    })
    
    // 新增判断当前环境
    if (process.env.NODE_ENV !== 'development') {
        win.loadFile(path.join(__dirname, "./index.html"));
    } else {
        win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)
    }
}

1.4.2 package.json 新增 electron-builder 相关配置

1.4.2.1 scripts 修改build配置

 "scripts": {
    "build": "vue-tsc && rimraf dist-electron && vite build && electron-builder"
  },

1.4.2.2 新增build相关配置

appId、productName… —— 应用基本信息
directories —— 输出路径
mac win —— mac windw 相关配置
nsis —— 桌面应用程序安装过程的配置

"build": {
      "appId": "com.electron.electronvitevue",
      "productName": "electron-vite-vue",
      "asar": true,
      "copyright": "Copyright © 2022 electron",
      "directories": {
        "output": "release/${version}"
      },
      "files": [
        "./package.json",
        "./dist-electron"
      ],
      "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
      },
     
      "releaseInfo": {
        "releaseNotes": "版本更新的具体内容"
      }
    }

1.4.2.3 nsis 相关配置

nsis: {
	"oneClick": false, // 创建一键安装程序还是辅助安装程序（默认是一键安装）
    "allowElevation": true, // 是否允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序 （仅作用于辅助安装程序）
    "allowToChangeInstallationDirectory": true, // 是否允许修改安装目录 （仅作用于辅助安装程序）
    "installerIcon": "public/timg.ico",// 安装程序图标的路径
    "uninstallerIcon": "public/timg.ico",// 卸载程序图标的路径
    "installerHeader": "public/timg.ico", // 安装时头部图片路径（仅作用于辅助安装程序）
    "installerHeaderIcon": "public/timg.ico", // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）
    "installerSidebar": "public/installerSiddebar.bmp", // 安装完毕界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）
    "uninstallerSidebar": "public/uninstallerSiddebar.bmp", // 开始卸载界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）
    "uninstallDisplayName": "${productName}${version}", // 控制面板中的卸载程序显示名称
    "createDesktopShortcut": true, // 是否创建桌面快捷方式
    "createStartMenuShortcut": true,// 是否创建开始菜单快捷方式
    "shortcutName": "SHom", // 用于快捷方式的名称，默认为应用程序名称
    "include": "script/installer.nsi",  // NSIS包含定制安装程序脚本的路径，安装过程中自行调用  (可用于写入注册表 开机自启动等操作)
    "script": "script/installer.nsi",  // 用于自定义安装程序的NSIS脚本的路径
    "deleteAppDataOnUninstall": false, // 是否在卸载时删除应用程序数据（仅作用于一键安装程序）
    "runAfterFinish": true,  // 完成后是否运行已安装的应用程序（对于辅助安装程序，应删除相应的复选框）
    "menuCategory": false, // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为true，则使用公司名称
}

nsis更多配置-官方

1.4.2.3 vite.config.ts 新增build配置

 build: {
        emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录
        outDir: "dist-electron"
    },

npm run build
输出文件默认目录 release下exe文件进行安装

安装成功后