文章目录

• 前言
• 一、安装electron-builder
• 二、打包
• • 1. 进行打包
  • 2、electron打包的相关配置
• 三、项目调试

前言

electron是将静态资源打包到asar文件中，我们打包的时候是将项目所有的文件进行打包的，所以我们访问的主页面其实就相当于是我们以往打包后dist文件中的资源。

一、安装electron-builder

介绍：electron-builder简单来说就是将我们的项目打包成一个静态的资源，我们可以进行安装使用的一个打包工具。

// 安装electron-builder
npm install electron-builder -D

安装成功之后我们的package.json文件中会出现安装好的工具。

二、打包

1. 进行打包

在package.json中添加：

  "scripts": {"dev": "vite","build": "vite build","electron:serve": "vite build & electron . ","electron:build": "electron-builder","preview": "vite preview"},

输入命令进行打包：

npm run electron:build

打包成功后会出现以下的目录结构：

然后点开win-packed文件里面的exe文件：

打开文件，我们发现页面空白，并且报了以下错误：

该错误说明是资源文件没有加载出来，然后我们打开刚刚打包后的index文件，我们发现，这里的资源路径是被打包成了绝对路径：

找到vite.config.js进行修改文件加载路径：

// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],// base: path.resolve(__dirname, './dist/'), // 之前的base: './', // 修改后的-->修改的这里server: {port: 8888,cors: true, // 允许跨域hmr: true, // 开启热更新},
})

找到main.js里面我们发现，我们的入口文件dist下面的index.html:

  // 加载 index.htmlmainWindow.loadFile(path.resolve(__dirname, './dist/index.html')) // 打包环境

因为入口文件是在asar/dist/index.htlm进行加载的，我们并没有将dist文件单独打包进asar资源文件中，所以我们的应用页面加载错误，所以我们应该先对项目进行普通打包然后再打包成我们想要的exe文件，在package.json中进行修改：

"electron:build": "vite build & electron-builder build --config electron-builder.json",

build --config是electron打包的相关配置，所以我们需要创建一个文件electron-builder.json输入以下配置：

{"productName": "test", // 打包后exe的文件名"files": ["./main.js", "./dist"]
}

最后再输入npm run electron:build进行打包就可以成功显示了：

2、electron打包的相关配置

在electron-builder.json输入以下代码进行配置：

{appId: "lethe.com",productName: "my-project", // 项目名，也是生成的安装文件名，即wyDemo.execopyright: "lethe Copyright © 2022", // 版权信息files: ["./main.js", "./dist"]extraFiles: [// 把指定的资源复制到程序根目录，即把server文件夹的内容复制到程序根目录，这里server文件夹下的内容相当于我的后台，我在background.js中有相应的处理。"./server",],directories: {output: "dists", // 输出文件路径},win: {// win相关配置// icon: "./favicon.ico", // 图标，当前图标在根目录下，注意这里有两个坑requestedExecutionLevel: "requireAdministrator", //获取管理员权限target: ["nsis", "zip"], // 利用nsis制作安装程序},nsis: {oneClick: false, // 是否一键安装allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。allowToChangeInstallationDirectory: true, // 允许修改安装目录// installerIcon: "./favicon.ico", // 安装图标// uninstallerIcon: "./favicon.ico", // 卸载图标// installerHeaderIcon: "./favicon.ico", // 安装时头部图标createDesktopShortcut: true, // 创建桌面图标createStartMenuShortcut: true, // 创建开始菜单图标shortcutName: "leDom", // 图标名称(项目名称)},
}

然后重新进行打包，这就是我们打包好的文件：

三、项目调试

项目调试只需要将主进程渲染入口修改本地的访问路径即可：

mainWindow.loadURL("http://localhost:8888/"); // 开发环境 --> 进行调试

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！