---

---

前言

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.html
  mainWindow.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.exe
    copyright: "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/"); // 开发环境 --> 进行调试