electron-vue 开发(4) 打包工具的使用以及管理员权限

本文详细介绍了如何使用electron-packager将Electron应用打包为Windows可执行文件,并通过修改manifest.xml实现管理员权限运行。此外,还介绍了如何利用InnoSetup创建安装包。

electron官网

开发环境

使用到的框架

技术栈

  • c++
  • nodejs
  • html+css+js

接上篇

electron 中我们开发完成之后, 需要打包软件.官方推荐的打包工具有2中:electron-builderelectron-packager 我使用的是electron-packager

electron-vue 中的 electron-packager

electron-vue 中有直接帮你打包的脚本

npm or yarn

直接输入:

npm run build:win32
or
yarn run build:win32
复制代码

就可以了, 不过由于npm镜像地址的原因, 下载打包的依赖文件比较多,使用npm还是经常会下载失败的,因此还是推荐使用yarn.

32位 or 64位

有时候我们需要编译32位或者64位的程序,在build.config.js里面修改 arch: ia32 x64 就可以分别编译成32位和64位的应用了

完成之后就可以看到在工程目录中多了build目录, 这就是已经打包出来的软件.

管理员权限

有时候我们希望打包出来的程序默认具有管理员权限, 这时候需要手动把windows的清单文件写进exe应用中. 步骤如下:

  1. 在软件exe目录下新建xml文件,名为manifest.xml
  2. manifest.xml内容如下

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
    <dependency>
        <dependentAssembly>
            <assemblyIdentity type="Win32" name="Microsoft.Windows.Common-Controls" version="6.0.0.0" processorArchitecture="*" publicKeyToken="6595b64144ccf1df" language="*"></assemblyIdentity>
        </dependentAssembly>
    </dependency>
    <trustInfo xmlns="urn:schemas-microsoft-com:asm.v3">
        <security>
            <requestedPrivileges>
                <!-- 修改前 -->
                <!--
                <requestedExecutionLevel level="asInvoker" uiAccess="false"></requestedExecutionLevel>
                -->
                <!-- 修改后 -->
                <requestedExecutionLevel level="requireAdministrator" uiAccess="false"/>
                <!-- end 修改 -->
            </requestedPrivileges>
        </security>
    </trustInfo>
    <asmv3:application xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">
        <asmv3:windowsSettings xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">
            <dpiAware>true</dpiAware>
                <disableWindowFiltering xmlns="http://schemas.microsoft.com/SMI/2011/WindowsSettings">true</disableWindowFiltering>
        </asmv3:windowsSettings>
    </asmv3:application>
    <ms_compatibility:compatibility xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1" xmlns="urn:schemas-microsoft-com:compatibility.v1">
        <ms_compatibility:application xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1">
            <ms_compatibility:supportedOS xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1" 
                Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}"></ms_compatibility:supportedOS>
            <ms_compatibility:supportedOS xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1" 
                Id="{1f676c76-80e1-4239-95bb-83d0f6d0da78}"></ms_compatibility:supportedOS>
            <ms_compatibility:supportedOS xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1" 
                Id="{4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38}"></ms_compatibility:supportedOS>
            <ms_compatibility:supportedOS xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1" 
                Id="{35138b9a-5d96-4fbd-8e2d-a2440225f93a}"></ms_compatibility:supportedOS>
            <ms_compatibility:supportedOS xmlns:ms_compatibility="urn:schemas-microsoft-com:compatibility.v1" 
                Id="{e2011457-1546-43c5-a5fe-008deee3d3f0}"></ms_compatibility:supportedOS>
        </ms_compatibility:application>
    </ms_compatibility:compatibility>
</assembly>
复制代码
  1. 确保本机有Windows 10 Sdk 这个可以在安装Vs2017的时候选择勾选

把当前目录添加到系统中的环境变量中. 添加成功后, 在控制台输入 mt

C:\Users\Administrator> mt
复制代码

会出现如下内容

切换目录到electron目录中

cd D:\electron-update\build\electron-update-win32-ia32
复制代码

输入

mt -manifest manifest.xml -outputresource:electron-update.exe;1
复制代码

这样软件启动的时候默认会已管理员权限启动了

Innosetup打包

使用electron-packager的问题就是不能直接打成一个软件安装包, 只有一个目录, 这个时候我们就借助第三方工具innosetup进行软件打包就好了, 官方有demo,还是很好上手的.

转载于:https://juejin.im/post/5cacbe5b6fb9a068b47b5b63

### 问题分析 Vue3 打包后在 Electron 应用中无法正确渲染,通常与资源路径、渲染进程的加载方式、打包配置或 Vue 项目的构建目标有关。Electron 通过主进程和渲染进程协同工作,如果 Vue 项目构建的静态资源路径不正确,或 Electron 的 `BrowserWindow` 未正确加载本地文件,会导致页面空白或加载失败。 ### 解决方案 #### 1. 确保 Vue 项目正确打包 Vue3 项目通常使用 Vite 或 Vue CLI 进行构建。打包后,静态资源路径应使用相对路径,确保 Electron 可以正确加载。 ```json // package.json 示例打包命令 "scripts": { "build": "vue-tsc --noEmit && vite build && electron-builder" } ``` 构建完成后,检查 `dist` 目录是否包含 `index.html` 和相关资源文件,并确保 Electron 的 `BrowserWindow` 加载的是本地文件路径,例如: ```ts // main.ts 示例 createWindow().loadFile(path.join(__dirname, '../dist/index.html')); ``` #### 2. 配置 Electron 的渲染进程加载方式 Electron 的渲染进程加载页面时,若使用 `file://` 协议加载本地 HTML 文件,需确保路径正确。如果使用 `http://localhost` 等网络地址,应确保本地开发服务器已启动,并且 Electron 能访问该地址。 ```ts // 使用本地文件加载 win.loadFile('dist/index.html'); // 或使用本地服务器 win.loadURL('http://localhost:3000'); ``` #### 3. 检查 Vue3 的构建配置 确保 Vue3 项目构建时使用的是适用于 Electron 的配置。例如,在使用 Vite 时,可配置 `build.outDir` 为 `dist`,确保 Electron 能正确识别输出目录。 ```ts // vite.config.ts 示例 export default defineConfig({ build: { outDir: 'dist' } }); ``` #### 4. 调试和检查控制台输出 在 Electron 中启用调试工具,检查渲染进程的控制台日志,查看是否有资源加载失败、路径错误或 JavaScript 错误。 ```ts // main.ts 中启用调试工具 win.webContents.openDevTools(); ``` #### 5. 处理静态资源路径问题 Vue3 打包后的资源路径可能因 `public` 目录或 `assets` 引用方式不正确导致加载失败。确保使用相对路径引用资源,避免使用绝对路径。 ```html <!-- 正确引用本地图片 --> <img src="./assets/logo.png" /> ``` #### 6. Electron 打包工具配置 使用 `electron-builder` 或 `electron-packager` 打包应用时,需确保 Vue3 的构建输出目录被正确包含在最终的打包产物中。 ```json // package.json 示例配置 "build": { "files": ["dist/**/*", "main.js", "package.json"] } ``` ### 相关注意事项 - Electron 版本需与 `electron-updater` 等插件兼容,建议使用较新的版本(如 `^3.0.0`)[^2]。 -Vue3 中使用 `NodeSerialport` 时,需通过 `window.require` 引入模块,并确保打包配置支持原生模块[^4]。 - 打包 Electron 应用时,建议以管理员权限执行命令,避免权限问题[^1]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值