1.前提:
(这个文档有配套的视频解说教程,大家想看的话, 直接在 blibli搜索 , 尘埃落在星河湾 这个up主,
将vtk.js打包成.exe实录课程_哔哩哔哩_bilibili
)
先将下载库的环境搭建好:
打开编辑配置文件,下面代码依次执行
npm config edit
registry=https://registry.npmmirror.com
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
npm cache clean --force
npm install --save-dev electron
2.在上面的基础上,执行下面指令: 安装打包exe需要的库.
npm install electron -D
npm install vite-plugin-electron -D
3.创建 electron/index.ts
// app 控制应用程序的事件生命周期（相当于应用程序）
// BrowserWindow 创建并控制浏览器窗口（相当于打开桌面弹框）
import { app, BrowserWindow,dialog,Menu } 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,
//允许html页面上的javascipt代码访问nodejs 环境api代码的能力（与node集成的意思）
}
})
const isDev = process.env.NODE_ENV === "development";
win.setMenu(null);//移除菜单
if (isDev) {
win.loadURL("http://localhost:5173");
} else {
win.loadFile(path.join(__dirname, "../dist/index.html"))
.catch(err => {
dialog.showErrorBox("启动错误", `无法加载静态文件：${err}`);
});
}
}
// 初始化app（在 Electron 完成初始化时触发）
app.whenReady().then(createWindow)
4: 在 vite.config.ts中, 添加 plugins 和 css两部分 (注意,这两部分必写,否则会造成第三方三维引擎中一些交互控件的失效)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
export default defineConfig({
plugins: [
vue(),
electron({
entry: 'electron/index.ts',
}),
],
css: {
preprocessorOptions: {
scss: {
additionalData: `$injectedColor: orange;`,
},
},
},
});
5.打开package.json, 一些必写的内容: 红线标记的地方, 下面给出具体代码.
"name": "digitalvtksys",
"private": true,
"version": "0.0.0",
"description": "Your project description",
"author": "HZX",
"main": "dist-electron/index.js",
"scripts": {
"dev": "cross-env NODE_ENV=development vite",
"build": "cross-env NODE_ENV=production vue-tsc --noEmit && vite build && electron-builder",
"preview": "vite preview"
},
"build": {
"appId": "com.electron.desktop",
"productName": "electron",
"asar": true,
"copyright": "Copyright © 2022 electron",
"directories": {
"output": "release/"
},
"files": [
"dist/**/*",
"dist-electron/**/*",
"src/assets/**/*",
"package.json"
],
"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": "版本更新的具体内容"
}
},
- 依次执行下面代码:
npm install cross-env
npm install electron-builder -D
//调试一下,如果成功的话,基本会启动exe程序了.
Npm run dev
Npm run build
到此,执行完成:
具体的视频教程搜索:
blibli: 尘埃落在星河湾,
