zoukankan      html  css  js  c++  java
  • vue项目加入electron打包exe应用程序

    1.创建vue脚手架项目;(话不多说 就是你要想打包的项目)

    2:配置cnpm; npm install -g cnpm --registry=https://registry.npm.taobao.org;

    3:vue add electron-builder 安装vue2 支持的 electron及打包依赖 (注意:如果没有用淘宝镜像,这里会很慢)

    4:安装完成会自动在src下创建一个文件background.js(也就是主入口文件,如果没有就自行创建,配置很多,基础如下,果然也有文件请忽略,绝大多数都是会自行创建的)

    'use strict'
    
    import { app, protocol, BrowserWindow, Menu, dialog, ipcMain} from 'electron'
    import {
      createProtocol,
      installVueDevtools
    } from 'vue-cli-plugin-electron-builder/lib'
    // Menu.setApplicationMenu(null)
    const isDevelopment = process.env.NODE_ENV === 'production'
    
    // Keep a global reference of the window object, if you don't, the window will
    // be closed automatically when the JavaScript object is garbage collected.
    let win
    
    // Scheme must be registered before the app is ready
    protocol.registerSchemesAsPrivileged([{
      scheme: 'app',
      privileges: {
        secure: true,
        standard: true
      }
    }])
    function createWindow () {
      // Create the browser window.
      win = new BrowserWindow({
        show:false,
        webPreferences: {
          nodeIntegration: true,
          enableRemoteModule: true,
          webSecurity: false
        }
      })
      if (process.env.WEBPACK_DEV_SERVER_URL) {
        // Load the url of the dev server if in development mode
        // win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
        win.loadURL(process.env.WEBPACK_DEV_SERVER_URL+"projectA")
        if (!process.env.IS_TEST) win.webContents.openDevTools()
      } else {
        createProtocol('app')
        // Load the index.html when not in development
        win.loadURL('app://./index.html')
        // win.loadURL('./resources/index.html')
      }
      win.maximize()
      win.show();
      win.on("close", (e) => {
        e.preventDefault()
        dialog.showMessageBox({
          type:'info',
          title: '提示',
          message:"要记得保存文件哦,您确定要关闭吗",
          buttons:['ok',"cancel"],
        })
        .then(data => {
          if (data.response == 0) {
            app.exit()
          }
        })
      })
    
      //  通讯
      ipcMain.on('asynchronous-message', (event, arg) => { 
        event.sender.send('asynchronous-reply', process.argv[1])
      })
     
      win.on('closed', () => {
        win = null
      })
    }
    // Quit when all windows are closed.
    app.on('window-all-closed', () => {
      // On macOS it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })
    
    // console.log("process.argv",process.argv)
    app.on('activate', () => {
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (win === null) {
        createWindow()
      }
    })
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', async () => {
      createWindow()
    })
    
    // Exit cleanly on request from parent process in development mode.
    if (isDevelopment) {
      if (process.platform === 'win32') {
        process.on('message', data => {
          if (data === 'graceful-exit') {
            app.quit()
          }
        })
      } else {
        process.on('SIGTERM', () => {
          app.quit()
        })
      }
    }

    5:在package.json下配置入口启动文件名和启动命令:如下 (1-6)

    {
      "name": "demo",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "start":"npm run electron:serve",  // 1
        "electron:build": "vue-cli-service electron:build", // 2
        "electron:serve": "vue-cli-service electron:serve", // 3
        "postinstall": "electron-builder install-app-deps", // 4
        "postuninstall": "electron-builder install-app-deps", // 5
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^2.6.11",
        "vue-router": "^3.2.0",
        "vuex": "^3.4.0"
      },
      "main": "background.js",// 6
      "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "sass": "^1.26.5",
        "sass-loader": "^8.0.2",
        "vue-cli-plugin-electron-builder": "~2.0.0-rc.5",
        "vue-template-compiler": "^2.6.11"
      }
    }

    7:npm start 搞定收工,你的热更新electron程序就启动啦,打包方式千万种,但这是最简单的 也是热更新的开发版本配置

  • 相关阅读:
    hdu 4614 线段树 二分
    cf 1066d 思维 二分
    lca 最大生成树 逆向思维 2018 徐州赛区网络预赛j
    rmq学习
    hdu 5692 dfs序 线段树
    dfs序介绍
    poj 3321 dfs序 树状数组 前向星
    cf 1060d 思维贪心
    【PAT甲级】1126 Eulerian Path (25分)
    【PAT甲级】1125 Chain the Ropes (25分)
  • 原文地址:https://www.cnblogs.com/gitwusong/p/14171686.html
Copyright © 2011-2022 走看看