Vue项目中引入electron发布桌面应用

摘要:
如果为false,则用户必须以提升的权限重新启动安装程序。

1. 在原先已有的Vue项目里面,打开终端执行vue add electron-builder ;


2. 选择合适的版本安装好这个插件,执行npm run electron:serve ;


3. 如果页面没有什么错误,就会弹出一个vue的应用窗口,说明准备工作已经完成;


4. 如果需要修改桌面应用界面或窗口之类的一些配置,则需要在package.json文件最后加上“build”键并将里面的各个参数都填进去即可,如同下方所示,关注最后的“build”:

{
    "name": "my-project",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "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",
    "dependencies": {
        "core-js": "^3.6.5",
        "electron": "^9.0.4",
        "electron-builder": "^22.7.0",
        "nedb": "^1.8.0",
        "nedb-promises": "^4.0.3",
        "vue": "^2.6.11"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.4.0",
        "@vue/cli-plugin-eslint": "~4.4.0",
        "@vue/cli-service": "~4.4.0",
        "babel-eslint": "^10.1.0",
        "electron": "^9.0.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "vue-cli-plugin-electron-builder": "~2.0.0-rc.2",
        "vue-template-compiler": "^2.6.11"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "parserOptions": {
            "parser": "babel-eslint"
        },
        "rules": {}
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
    ],
    "build": {
        "productName": "ElectronVue",
        "appId": "alexander.ezharjan.electron-vue",
        "dmg": {
            "contents": [{
                    "x": 410,
                    "y": 150,
                    "type": "link",
                    "path": "/Applications"
                },
                {
                    "x": 130,
                    "y": 150,
                    "type": "file"
                }
            ]
        },
        "directories": {
            "output": "build"
        },
        "openDevTools": true,
        "files": [
            "dist/electron",
            "node_modules/",
            "package.json"
        ],
        "mac": {
            "icon": "build/icons/icon.icns"
        },
        "win": {
            "icon": "build/icons/icon.ico"
        },
        "linux": {
            "icon": "build/icons"
        }
    }
}

5. 网上找到的所谓的“完整配置表”:


"build": {
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.leon.xxxxx",//包名  
    "copyright":"xxxx",//版权  信息
    "directories": { // 输出文件夹
      "output": "build"
    }, 
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, // 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",// 安装图标
      "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
      "createDesktopShortcut": true, // 创建桌面图标
      "createStartMenuShortcut": true,// 创建开始菜单图标
      "shortcutName": "xxxx", // 图标名称
      "include": "build/script/installer.nsh", // 包含的自定义nsis脚本
    },
    "publish": [
      {
        "provider": "generic", // 服务器提供商 也可以是GitHub等等
        "url": "http://xxxxx/" // 服务器地址
      }
    ],
    "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": {
      "icon": "build/icons/aims.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "build/icons"
    }
  }




作者:艾孜尔江·艾尔斯兰

免责声明:文章转载自《Vue项目中引入electron发布桌面应用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇7-1 查找书籍使用SourceTree将bitbucket的远程仓库回滚到某一次提交-b下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue 权限管理怎么做

前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作。作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制。 需求 因为这是一个工作上的业务需求,所以对于我来说主要有两个地方需要进行权限控制。 第一个是侧边菜单栏,需要控制显示与隐藏。 第二个就是页面内的各个按钮,弹窗等。 流程...

适用于 Vue 的播放器组件Vue-Video-Player。

如果h5的标签<vedio>不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求。 <video-player ref="videoPlayer" :playsinline="true" :options="playerOptions" >&l...

前端框架Vue自学之Vue CLI(五)

终极目标:掌握和使用Vue(全家桶:Core+Vue-router+Vuex) 本博客目的:记录Vue学习的进度和心得(Vue CLI) 内容:学习和使用Vue CLI2 和 Vue CLI3。如果了解webpack如何一步步配置的,建议可以先看我的前一个博客:前端框架Vue自学之webpack(四)。 正文: Vue CLI 一、Vue CLI 1、前言...

Vue+koa2开发一款全栈小程序(3.vue入门、Mpvue入门)

1.Vue-cli 1.新建一个vue项目 打开cmd 官方命令行工具 npm install -g vue-cli //安装脚手架 cd到你想要存放demo的目录下,然后 vue init webpack vue-demo //新建demo  其中user EsLint....那一行选项要选n 还有选最后一条时,让你选npm、yarn、No,I ca...

vue基于element-ui制作的成绩管理系统(三)主界面 登录后跳转的页面

1.在views文件夹下新建home.vue  介绍下首页应该包含头部。左边菜单导航栏。右面实时加载的内容,整个部分划分为三块。 页面布局如下 <template> <el-row style="height:100%"> <v-header></v-header> //头部组件 <e...

Vue2和Vue3生命周期比较

对Vue2和Vue3常用的生命周期函数做了一个比较。 重点比较了 V2 的 created,beforeCreate 与 Vue3 新加入的 setup; V2 的 beforeMount,mounted 和 Vue3 的 onBeforeMount,onMounted; <template> <div>Hellow Vue...