.js项目编译成.exe程序(交叉编译全过程整理)

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, 一些必写的内容: 红线标记的地方, 下面给出具体代码.