本篇技术文主要步骤是
- 先搭建vue3+ts项目
- 然后把electron库使用pnpm安装
- 创建electron主进程和预先执行的文件
- 最后配置合成项目（包括使electron主进程ts模块化，electron入口文件）
第一步：
第一步请看使用vite搭建vue3项目（超简单）这篇博文。
第二步：
使用pnpm依次安装以下安装包
"devDependencies": {
"@vitejs/plugin-vue": "^2.2.0", //vite插件包
"concurrently": "^7.0.0", //执行多个命令包
"cross-env": "^7.0.3", //跨环境设置环境变量包
"electron": "^17.1.1", //electron桌面软件包
"electron-builder": "^22.14.13", //electron软件打包
"electron-devtools-installer": "^3.2.0", //elelctron辅助安装工具
"typescript": "^4.5.4",
"vite": "^2.8.0",
"vue-tsc": "^0.29.8"
}
成功之后走第三步，中间如遇到安装elelctron问题，可以尝试更换网络。
第三步：
在项目目录根目录创建一个electron文件夹，里面创建main.ts和preload.ts，如下
其中main.ts代码：
const {
app, BrowserWindow } = require("electron");
const path = require("path");
console.log(process.env.MODE);
const loadUrl = process.env.MODE === "devlopment" ? "http://localhost:3000/" : path.join(__dirname, "../src/index.html");
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
// nodeIntegration: true,
},
});
win.loadURL(loadUrl);
}
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
其中preload.ts代码：
window.addEventListener("DOMContentLoaded", () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector);
if (element) element.innerText = text;
};
for (const type of ["chrome", "node", "electron"]) {
replaceText(`${
type}-version`, process.versions[type]);
}
});
然后再修改vite.config.ts为以下代码：
import {
defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig(({
command, mode }) => {
if (command === "build") {
console.log("vite");
}
return {
plugins: [vue()],
base: "", //解决编译后白屏问题， 默认是'/'
build: {
outDir: "dist/src",
},
};
});
第四步：
最后在package.json中script添加命令行脚本：
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"electron-tsc": "tsc electron/main.ts electron/preload.ts --outDir dist/main",
"electron:build": "pnpm build && pnpm electron-tsc",
"electron-dev": "cross-env ELECTRON_DISABLE_SECURITY_WARNINGS=true MODE='devlopment' electron .",
"electron:dev": "pnpm electron-tsc && concurrently \"pnpm dev\" \"pnpm electron-dev\"",
"preview": "vite preview",
"app:build": "pnpm electron:build && pnpm electron-builder"
},
还得再package.json中添加"main": "dist/main/main.js",
最后package.json如下：
{
"name": "vue3-instance-app",
"private": true,
"version": "0.0.0",
"main": "dist/main/main.js",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"electron-tsc": "tsc electron/main.ts electron/preload.ts --outDir dist/main",
"electron:build": "pnpm build && pnpm electron-tsc",
"electron-dev": "cross-env ELECTRON_DISABLE_SECURITY_WARNINGS=true MODE='devlopment' electron .",
"electron:dev": "pnpm electron-tsc && concurrently \"pnpm dev\" \"pnpm electron-dev\"",
"preview": "vite preview",
"app:build": "pnpm electron:build && pnpm electron-builder"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.2.0",
"concurrently": "^7.0.0",
"cross-env": "^7.0.3",
"electron": "^17.1.1",
"electron-builder": "^22.14.13",
"electron-devtools-installer": "^3.2.0",
"typescript": "^4.5.4",
"vite": "^2.8.0",
"vue-tsc": "^0.29.8"
},
}
最后执行命令：pnpm electron:dev
成功显示：
桌面软件成功：
最后做生产环境打包为桌面软件安装包
前面安装了electron-builder，现在只需在package.json配置顶层对象添加以下:
"build": {
"appId": "com.example.app",
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./public/favicon.ico"
},
"files": [
"dist"
],
"directories": {
"output": "electron_dist"
}
}
然后命令行执行pnpm app:build
打包成功：
项目就会出现一个electron_dist文件夹：
双击exe就可执行安装程序，这是个安装包，发给对方windows电脑，对方就能使用你开发的软件了。
安装成功后就会在桌面生成一个软件图标：
点击即可运行：
自此，完成了windows桌面软件打包。