Electron + ts + vue3 + vite
[*]正常搭建脚手架：npm create vite@latest 项目名称
[*] 安装electron的相关依赖：注：安装时终端url要项目名那一层
[*]安装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
[*] 在项目的根目次下新建electron-main文件夹，之后新建index.ts，配置如下：
import { app, BrowserWindow } from "electron";
import * as path from "path";
// 本地启动的vue项目路径
const vueProjectAddress = "http://localhost:5173"
/**
* 创建一个新的窗口
*/
const createWindow = () =>{
const win = new BrowserWindow({
webPreferences: {
contextIsolation: false, // 是否开启隔离上下文
nodeIntegration: true, // 渲染进程使用Node API
},
});
if (app.isPackaged) {
win.loadFile(path.join(__dirname, "../index.html"));
} else {
win.loadURL(vueProjectAddress);
}
};
// 打开窗口
app.whenReady().then(() => {
createWindow(); // 创建窗口
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// 关闭窗口
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
[*]在tsconfig.app.json中的include增加配置"electron-main/**/*.ts" "include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"electron-main/**/*.ts"
]
[*]在vite.config.ts配置 import electron from "vite-plugin-electron";
import electronRenderer from "vite-plugin-electron-renderer";
export default defineConfig({
plugins: [
vue(),
electron({
entry: "electron-main/index.ts", // 主进程文件
}),
electronRenderer(),
],
build: {
emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录
},
})
[*]打开package.json，增加以下配置： {
"name": "my-vue-app",
"private": true,
"version": "0.0.0",
"main": "dist-electron/index.js", // 新增
"scripts": {
"dev": "vite",
"build": "vue-tsc && rimraf dist && vite build && electron-builder",
"preview": "vite preview"
},
// build 新增
"build": {
"appId": "com.smallpig.desktop",
"productName": "smallpig",
"asar": true,
"copyright": "Copyright © 2022 smallpig",
"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
},
// 新增
"publish": [
{
"provider": "generic",
"url": "http://127.0.0.1:8080"
}
],
"releaseInfo": {
"releaseNotes": "版本更新的具体内容"
}
},
"dependencies": {
"electron-devtools-installer": "^3.2.0",
"vue": "^3.2.45"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"electron": "^22.0.2",
"electron-builder": "^23.6.0",
"install": "^0.13.0",
"npm": "^9.3.0",
"polyfill-exports": "^0.4.0-beta.2",
"rimraf": "^4.1.0",
"typescript": "^4.9.3",
"vite": "^4.0.0",
"vite-plugin-electron": "^0.11.1",
"vite-plugin-electron-renderer": "^0.11.4",
"vue-tsc": "^1.0.11"
}
}
[*] 在npm run dev即可
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]