内容纲要

使用框架

https://github.com/SimulatedGREG/electron-vue

需要打包为支持 win32 和 win64, 默认为 win64

package.json 修改 build 节,如果 exe 主程序还需要 UAC 最高权限,还需添加 "requestedExecutionLevel": "highestAvailable",

"win": {
      "requestedExecutionLevel": "highestAvailable",
      "icon": "build/icons/icon.ico",
      "target": [{
        "target": "nsis",
        "arch": [
          "x64",
          "ia32"
        ]
      }]
    },

依赖原生模块

需要安装编译工具,如果使用 electron-builder 打包,无需安装 electron-rebuild 模块
在 package.json 配置

"postinstall": "electron-builder install-app-deps"

在每次执行 yarn install(npm install) 后会自动编译安装依赖原生模块。

package.json

{
  "name": "XXXXXX",
  "version": "0.0.1",
  "author": "wyrover <wyrover@gmail.com>",
  "description": "An electron-vue project",
  "license": null,
  "main": "./dist/electron/main.js",
  "scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "dev": "node .electron-vue/dev-runner.js",
    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "productName": "XXXXXX",
    "appId": "xxx.xxx.xxx.xxx",
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [{
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "requestedExecutionLevel": "highestAvailable",
      "icon": "build/icons/icon.ico",
      "target": [{
        "target": "nsis",
        "arch": [
          "x64",
          "ia32"
        ]
      }]
    },
    "linux": {
      "icon": "build/icons"
    }
  },
  "dependencies": {
    "auto-launch": "^5.0.5",
    "axios": "^0.18.0",
    "crypto-js": "^3.1.9-1",
    "iview": "^3.3.3",
    "net-ping": "^1.2.3",
    "request": "^2.88.0",
    "vue": "^2.5.16",
    "vue-clipboard2": "^0.3.0",
    "vue-electron": "^1.0.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-electron": "^1.0.0",
    "ws": "^6.2.0"
  },
  "devDependencies": {
    "ajv": "^6.5.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "babili-webpack-plugin": "^0.1.2",
    "cfonts": "^2.1.2",
    "chalk": "^2.4.1",
    "copy-webpack-plugin": "^4.5.1",
    "cross-env": "^5.1.6",
    "css-loader": "^0.28.11",
    "del": "^3.0.0",
    "devtron": "^1.4.0",
    "electron": "^2.0.4",
    "electron-builder": "^20.19.2",
    "electron-debug": "^1.5.0",
    "electron-devtools-installer": "^2.2.4",
    "electron-rebuild": "^1.8.4",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-html": "^4.0.3",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-standard": "^3.1.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "0.4.0",
    "multispinner": "^0.2.1",
    "node-loader": "^0.6.0",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.2.4",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-hot-middleware": "^2.22.2",
    "webpack-merge": "^4.1.3"
  },
  "__npminstall_done": false
}

electron 发布时的白屏问题

有可能是原生模块无权限加载的问题,需要管理权限,最好还是打开调试窗。

在 main 进程中主动打开

mainWindow.webContents.openDevTools()

禁用双击窗口最大化

mainWindow.setFullScreenable(false)
mainWindow.setMaximizable(false)
mainWindow.isResizable(false)

参考

发表评论

电子邮件地址不会被公开。 必填项已用*标注