Electron packaging and related configuration

---

---

foreword

Electron packs static resources into asar files. When we pack, we pack all the files of the project, so the main page we visit is actually equivalent to the resources in the dist file we used to pack.

---

1. Install electron-builder

Introduction: electron-builder is simply a packaging tool that packages our project into a static resource, which we can use for installation.

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

After the installation is successful, the installed tools will appear in our package.json file.

Two, packing

1. Packing

Add in package.json:

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

Enter the command to package:

npm run electron:build

After the packaging is successful, the following directory structure will appear:

Then click the exe file in the win-packed file:

open the file, we find that the page is blank, and the following error is reported:

the error indicates that the resource file has not been loaded, and then we open the just In the packaged index file, we found that the resource path here is packaged into an absolute path:

find vite.config.js to modify the file loading path:

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

Find in main.js and we find that index.html under our entry file dist:

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

Because the entry file is loaded in asar/dist/index.htlm, we did not package the dist file separately into the asar resource file, so our application page loads incorrectly, so we should first package the project normally and then package it Become the exe file we want, and modify it in package.json:

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

build --config is the related configuration of electron packaging, so we need to create a file electron-builder.json and enter the following configuration:

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

Finally, enter npm run electron:build to package and it can be successfully displayed:

2. Related configuration of electron packaging

Enter the following code in electron-builder.json for configuration:

{
    
    
    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", // 图标名称(项目名称)
    },
}

Then repackage, this is our packaged file:

3. Project debugging

Project debugging only needs to modify the local access path of the main process rendering entry:

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