electron-builder 设置用户可以自己选择安装目录

豪先生5

已于 2022-09-27 14:43:09 修改

阅读量2.7k

点赞数 1

分类专栏： Electron vue 文章标签： electron vue.js 前端

于 2022-08-15 19:03:53 首次发布

本文链接：https://blog.csdn.net/weixin_46171419/article/details/126352845

版权

vue 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

Electron

10 篇文章 1 订阅

订阅专栏

1、在配置文件中设置nsis

1、如果是package.json

我第一种方法不成功,第二种方法成功

{
  "name": "qq",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "build":{
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  },
  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.9",
    "express": "^4.18.1",
    "qs": "^6.11.0",
    "socket.io": "^4.5.1",
    "socket.io-client": "^3.1.0",
    "vscode-material-icon-theme-js": "^1.0.7",
    "vue": "^2.6.14",
    "vue-qr": "^4.0.9",
    "vue-qrcode-reader": "^3.1.0",
    "vue-router": "^3.5.1",
    "vue-socket.io": "^3.0.10",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "electron": "^12.0.0",
    "electron-devtools-installer": "^3.1.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
  
}

2、如果是vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        //解决用户不能自己选择安装目录
        nsis: {
          oneClick: false,
          allowToChangeInstallationDirectory: true
        }
      }
    }
  },
})

3、效果图