vue-cli-plugin-electron-builder打包

vue.config.js

1、在vue配置文件中加入：

module.exports = {
  publicPath: './', 
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      // List native deps here if they don't work
      externals: ['my-native-dep'],
      // If you are using Yarn Workspaces, you may have multiple node_modules folders
      // List them all here so that VCP Electron Builder can find them
      nodeModulesPath: ['./node_modules'],
      builderOptions: {
        appId: "com.example.app",
        productName: "myTv",//项目名，也是生成的安装文件名，即aDemo.exe
        copyright: "Copyright © 2019",//版权信息
        directories: {
          output: "./dist"//输出文件路径
        },
        win: {//win相关配置
          icon: "./public/Mtv.ico",//图标，当前图标在根目录下，注意这里有两个坑
          target: [
            {
              target: "nsis",//利用nsis制作安装程序
              arch: [
                "x64",//64位
              ]
            }
          ]
        },
        nsis: {
          oneClick: false, // 是否一键安装
          allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
          allowToChangeInstallationDirectory: true, // 允许修改安装目录
          installerIcon: "./public/Mtv.ico",// 安装图标
          uninstallerIcon: "./public/Mtv.ico",//卸载图标
          installerHeaderIcon: "./public/Mtv.ico", // 安装时头部图标
          createDesktopShortcut: true, // 创建桌面图标
          createStartMenuShortcut: true,// 创建开始菜单图标
          shortcutName: "Mtv", // 图标名称
        },
      }
    }
  }
}

2、然后运行：npm run electron:build

3、打包过程中会下载一些文件，有时会因为文件下载失败而导致打包失败，需要自己手动下载放到C:\Users\Administrator\AppData\Local\electron-builder\Cache或者C:\Users\Administrator\AppData\Local\electron\Cache中，具体可以看这篇文章：electron打包手动下载依赖

4、打包完成后在dist目录会有一个.exe文件和文件夹，点进去文件夹打开.exe程序，如果发现启动后是白屏，修改vue路由文件：
router/index.ts

我这里使用版本vue3.0 + ts + vue-router4.0.0-0

import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Start from '../views/Start.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Start',
    component: Start
  }
];

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL), // 这里原来是createWebHistory，换成哈希的就可以正常使用了
  routes
});

export default router;

5、如果打包出现ico图标报错，

1、图标是256256的
2、不要直接把.jpg或其他格式改后缀为.ico？解决：http://www.ico51.cn/到这个网址或其他方式自己转换，记住是256256的
3、注意图标路径：上面的vue.config.js配置中的ico图标是放在根目录下public文件夹中，注意是根目录。

6、几篇博客可以参考下：

1、在vue-cli-plugin-electron-builder下用electron:build打包或生成应用程序的两种方法
2、electron打包手动下载依赖