创建Electron项目

一、使用vite 构建 electron项目

npm init vite@latest
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
√ Project name: ... CertificateDownload
√ Package name: ... certificatedownload
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in E:\electron\CertificateDownload...

Done. Now run:

  cd CertificateDownload
  npm install
  npm run dev

按说明输入如下命令

cd CertificateDownload
npm install
npm run dev

  VITE v4.4.6  ready in 565 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

安装electron

npm install electron -D
npm install vite-plugin-electron -D

如果提示

error command failed

error command C:\Windows\system32\cmd.exe /d /s /c node install.js

可能是没有python环境，需要自行安装，或者通过下面方式进行安装

使用cnpm i electron --save-d进行安装，提示

√ All packages installed (72 packages installed from npm registry, used 2m(network 4s), speed 591.99kB/s, json 70(1.16MB), tarball 1.4MB)

如果

如图所示 当执行npm i electron -D会一直卡在这个地方

解决办法 使用cnpm

cnpm install electron -D
cnpm install vite-plugin-electron -D
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功

根目录新建 electron / index.ts

修改vite.config.ts 配置文件

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({
    main: {
      entry: "electron/index.ts"
    }
  })]
})

编写代码 electron / index.ts

import { app, BrowserWindow } from 'electron'
import path from 'path'
//app 控制应用程序的事件生命周期。
//BrowserWindow 创建并控制浏览器窗口。
 
let win: BrowserWindow | null;
//定义全局变量获取 窗口实例
 
const createWindow = () => {
    win = new BrowserWindow({
        //
        webPreferences: {
            devTools: true,
            contextIsolation: false,
            nodeIntegration: true
            //允许html页面上的javascipt代码访问nodejs 环境api代码的能力（与node集成的意思）
        }
    })
    if (app.isPackaged) {
        win.loadFile(path.join(__dirname, "../index.html"));
    } else {
//VITE_DEV_SERVER_HOST 如果是undefined 换成  VITE_DEV_SERVER_HOSTNAME
        win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`)
    }
}
//isPackage 不好使换下面的
  //  if(process.env.NODE_ENV != 'development'){
      //  win.loadFile(path.join(__dirname, "../index.html"));
  //  }else{
        //win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOSTNAME']}:${process.env['VITE_DEV_SE//RVER_PORT']}`)
   // }
//在Electron完成初始化时被触发
app.whenReady().then(createWindow)

配置package json 增加main 字段 type 去掉

{
  "name": "certificatedownload",
  "private": true,
  "version": "0.0.0",
  "main": "electron/index.ts",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "start": "electron ."
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "electron": "^25.3.1",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-electron": "^0.12.0",
    "vue-tsc": "^1.8.5"
  }
}

将start修改为"start": "electron"

运行npm run start

环境没有问题

将start修改为"start": "electron ."

 

扩展
如果直接快速新建一个electron项目
 

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start