Electron-vue + electron-builder 配置打包后以管理员身份运行

Electron-vue + electron-builder 配置打包后以管理员身份运行

  1. 打开项目根目录下的vue-config.js配置文件
  2. 找到electronBuilder节点,在子节点win中添加requestedExecutionLevel: 'requireAdministrator'
pluginOptions: {
   electronBuilder: {
     /**
      * As of v2.0 of VCPEB, Electron nodeIntegration is disabled by default.
      * This blocks all node APIs such as require.
      * If you need to use native modules such as fs or sqlite in the renderer process, you can enable nodeIntegration
      */
     // nodeIntegration: true,
     preload: 'src/preload.js',
     externals: ['electron-edge-js'],
     builderOptions: {
       // 项目名,生成的exe文件的前缀名
       productName: process.env.VUE_APP_PRODUCT_NAME,
       // 包名
       appId: process.env.VUE_APP_ID,
       // 版权信息
       copyright: 'Copyright © 2021 XXX有限责任公司 All rights reserved',
       // 输出文件夹
       directories: {
         output: 'dist_electron'
       },
       // 额外资源,会将指定目录复制到resources目录下
       extraResources: [
         {
           from: 'public/bat',
           to: 'bat',
           filter: ['**/*']
         },
         {
           from: 'public/service',
           to: 'service',
           filter: ['**/*']
         },
         {
           'from': 'node_modules/regedit/vbs',
           'to': 'vbs',
           'filter': ['**/*']
         }
       ],
       nsis: {
         // 是否一键安装
         oneClick: false,
         // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
         allowElevation: true,
         // 允许修改安装目录
         allowToChangeInstallationDirectory: true,
         // 安装图标
         installerIcon: './build/icons/icon.ico',
         // 卸载图标
         uninstallerIcon: './build/icons/icon.ico',
         // 安装时头部图标
         installerHeaderIcon: './build/icons/icon.ico',
         // 创建桌面图标
         createDesktopShortcut: true,
         // 创建开始菜单图标
         createStartMenuShortcut: true,
         // 快捷方式的名称,默认为应用程序名称
         shortcutName: process.env.VUE_APP_PRODUCT_NAME
       },
       win: {
         icon: './build/icons/icon.ico',
         target: [
           {
             target: 'nsis',
             arch: [
               'ia32'
             ]
           }
         ],
         // 以管理员权限运行
         requestedExecutionLevel: 'requireAdministrator'
       },
       // 安装包名称,可自行配置
       // eslint-disable-next-line no-template-curly-in-string
       artifactName: '${productName}_Setup_${version}_${platform}.${ext}',
       releaseInfo: {
         releaseName: process.env.VUE_APP_RELEASE_NAME,
         releaseNotes: process.env.VUE_APP_RELEASE_NOTES
       },
       publish: [
         {
           provider: 'generic',
           // 这里指向存放的目录而非文件,目录下包含 latest.yml 和 .exe安装包
           url: process.env.VUE_APP_AUTO_UPDATE_URL
         }
       ]
     }
   }
 }
  1. 打包完安装后,应用图标上会显示盾牌符号,显示已管理员身份启动此应用。
    在这里插入图片描述
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: electron-vue 是一个使用 Vue.js 开发跨平台桌面应用的框架,可以使用 electron-builder 工具将其打包成 exe 文件。 以下是将 electron-vue 项目打包成 exe 的基本步骤: 1. 安装 electron-builderelectron-vue 项目的根目录下执行以下命令: ``` npm install electron-builder --save-dev ``` 2. 配置打包参数 在项目根目录下创建一个 electron-builder.json 文件,用于配置打包参数。可以参考 electron-builder 的文档进行配置,主要包括应用程序名称、版本号、图标等。 3. 执行打包命令 在项目根目录下执行以下命令进行打包: ``` npm run build:win ``` 该命令会生成一个 dist 目录,其中包含打包后的应用程序和安装程序,可以在 Windows 上运行。 以上就是将 electron-vue 项目打包成 exe 的基本步骤,希望对你有帮助。 ### 回答2: electron-vue 是基于 Vue.jsElectron 的开发框架,可以快速构建桌面应用程序。在开发完成后,开发者需要将其打包成 .exe 格式(Windows 可执行文件),以便部署和发布。 以下是将 electron-vue 项目打包成 .exe 文件的步骤: 1. 准备工作 首先要安装 electron-packager 包,这个包可以让我们快速打包 electron 应用程序。可以在终端中输入以下命令进行安装: npm install electron-packager --save-dev 2. 修改 package.json 文件 在 package.json 文件中,需要添加以下代码: "scripts": { "package": "electron-packager ./ --platform=win32 --arch=x64 --icon=./build/icons/icon.ico --out=./dist --ignore=dist --overwrite" } 这个代码段是一个命令,运行它可以将项目打包成指定平台(这里是 win32,也就是 Windows)的可执行文件,以 .exe 格式输出到指定目录(这里是 dist 文件夹)。其中,--icon 表示程序图标,--ignore 是忽略打包的文件夹,--overwrite 表示覆盖已有的输出文件夹。 3. 执行打包命令 在终端中输入以下命令,即可开始打包: npm run package 然后等待一段时间,打包成功之后会在 dist 目录下生成 .exe 文件。 4. 发布 最后将 .exe 文件上传到合适的平台(例如 GitHub Release),这样用户就可以下载并使用了。 注意事项: - 在打包时需要注意修改 .ico 图标文件的路径,确保能正确找到。 - 若需要打包成其他平台的可执行文件,可以修改 --platform 和 --arch 参数。 - 打包时,如果报错了,可以在命令行加上 --verbose 参数,查看具体错误信息。 ### 回答3: electron-vue是一个基于vue.js构建的 electron框架的项目,可以让开发者快速地构建跨操作系统的桌面应用程序,并且electron-vue项目也非常容易打包成exe可执行文件,便于在Windows平台上使用。 打包electron-vue项目成exe的方法: 首先要在命令行中进入项目根目录, 然后运行: npm run build 或 yarn run build 这两个命令将会编译和打包electron-vue项目,生成一个dist目录。 在默认情况下,打包出的exe应用程序是没有图标的,如果需要添加图标,需要在build目录下找到win下的icon.ico文件,并替换成你自己的图标文件。 接下来,需要使用第三方的打包工具,如electron-builder打包成exe文件,命令如下: npm run dist 或 yarn run dist 执行完这个命令后,就会在dist目录下生成一个installer目录,里面包含着生成的exe文件和其他必要的文件。 理论上,exe应用程序已经可以在Windows平台上使用了。 总结: electron-vue项目打包成exe并不是一件复杂的事情。只需进入项目根目录运行 npm run build 命令,然后使用第三方打包工具electron-builder打包,就可以生成一个可执行的exe文件了,这样就极大地方便了开发者在Windows平台上部署应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值