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

  "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": "版本更新的具体内容"

    }

  },

1. 依次执行下面代码:

npm   install cross-env

npm install electron-builder -D 

//调试一下,如果成功的话,基本会启动exe程序了.

Npm run dev

Npm run build

到此,执行完成:

具体的视频教程搜索:

blibli: 尘埃落在星河湾,