图集1/6

正文 4903字数 65,856阅读


1.安装electron
,通过npm下载electron 需要全局安装
npm i -s electron -D
Run code
Cut to clipboard


    2.新建main.js
    在和src同级的目录中新建一个electron文件夹，在文件夹中新建main.js

    3.修改package.json文件

    1.删掉type这个字段，不然会报错
    2.然后加上"main": "electron/main.js",
    3.在scripts字段中加入启动electron的命令：如下图


    4.main.js代码
    在刚才创建的electronx文件夹下main.js中加入以下代码
    // 控制应用生命周期和创建原生浏览器窗口的模组 const { app, BrowserWindow, Menu } = require('electron') const path = require('path') // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true // 关闭控制台的警告 function createWindow() { // 创建浏览器窗口 const mainWindow = new BrowserWindow({ width: 1200, height: 800, webPreferences: { // 书写渲染进程中的配置 nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API contextIsolation: false, // 可以使用require方法 enableRemoteModule: true, // 可以使用remote方法 }, }) // 监听html mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) } // 这段程序将会在 Electron 结束初始化 // 和创建浏览器窗口的时候调用 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(() => { createWindow() app.on('activate', function () { // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他 // 打开的窗口，那么程序会重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在 // 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。 app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() })
    Run code
    Cut to clipboard


      5.配置加载代码热更新
      1.下载electron-reload模块
      npm i electron-reload
      Run code
      Cut to clipboard

        2. 在electron的配置文件中加入下列代码
        // 配置热更新 let env = 'pro' if (env == 'pro') { const elePath = path.join(__dirname, '../node_modules/electron') require('electron-reload')('../', { electron: require(elePath), }) // 热更新监听窗口 mainWindow.loadURL('http://localhost:8888') // 打开开发工具 mainWindow.webContents.openDevTools() } else { // 生产环境中要加载文件，打包的版本 // Menu.setApplicationMenu(null) // 加载 index.html mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增 }
        Run code
        Cut to clipboard


          全部的main.js代码可直接复制使用
          // 控制应用生命周期和创建原生浏览器窗口的模组 const { app, BrowserWindow, Menu } = require('electron') const path = require('path') function createWindow() { // 创建浏览器窗口 const mainWindow = new BrowserWindow({ width: 1200, height: 800, webPreferences: { // 书写渲染进程中的配置 nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API contextIsolation: false, // 可以使用require方法 enableRemoteModule: true, // 可以使用remote方法 }, }) let env = 'pro' // 配置热更新 if (env == 'pro') { const elePath = path.join(__dirname, '../node_modules/electron') require('electron-reload')('../', { electron: require(elePath), }) // 热更新监听窗口 mainWindow.loadURL('http://localhost:8888') // 打开开发工具 mainWindow.webContents.openDevTools() } else { // 生产环境中要加载文件，打包的版本 // Menu.setApplicationMenu(null) // 加载 index.html mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增 } } // 这段程序将会在 Electron 结束初始化 // 和创建浏览器窗口的时候调用 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(() => { createWindow() app.on('activate', function () { // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他 // 打开的窗口，那么程序会重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在 // 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。 app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() })
          Run code
          Cut to clipboard


            3.其中的env是阀门方便打包成app，开发中热更新就使用env=pro就好了
            4.因为监听的是8888端口，所以我们需要去更改vue的运行端口，
            在vite.config.js中加入以下代码
            export default defineConfig({ plugins: [vue()], server: { port: 8888, cors: true, // 允许跨域 hmr: true, // 开启热更新 }, })
            Run code
            Cut to clipboard



              5.开启两个终端，一个终端运行vue的项目启动
              因为我的是默认配置 所以是 npm run dev
              另一个终端运行 npm run start,这个时候你就发现，代码可以热更新了

              6.打包
              1.在上文的main.js配置中，已经配置了打包的监听的文件
              2.我们需要下载打包模块，我这里使用的是electron-builder 需要全局安装
              npm i electron-builder -D
              Run code
              Cut to clipboard

                3.在vite.config.js中更改根路径，新增base


                4.在package.json中新增打包命令
                "electron:build": "vite build & electron-builder build --config electron-builder.json"
                Run code
                Cut to clipboard

                  5.在src同级目录中新建打包配置文件electron-builder.json，在里面加入以下代码
                  { "productName": "app名字", "files": ["./electron/main.js", "./dist"], "extraFiles": ["./videos", "./cvideo"], // 保留的文件夹 "directories": { "output": "./buileder" } }
                  Run code
                  Cut to clipboard


                    6.记住去把main.js中的env改成非pro 可以是pro2或者其他都可以，不是pro就行


                    7.打开终端运行命令npm run electron:build
                    npm run electron:build
                    等终端运行完毕，会在目录中生成一个builder文件夹，app就在里面

                    到这里打包为exe就完成了，
                    这里我没有去掉状态栏，如果要去掉状态栏，
                    在main.js中把这个注释解开就好


                    https://blog.csdn.net/weixin_44275686/article/details/128534129