一、使用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
