1. 生成一个vue-demo(如果是要打包已有vue项目，这里跳过)

• 配置环境

    安装最新版本
    npm install -g @vue/cli
    或
    yarn global add @vue/cli
  
    如果想卸载之前版本
    npm uninstall vue-cli -g
    或
    yarn global remove vue-cli
    
    查看版本
    vue --version
    或
    vue -V
    
    创建一个vue demo
    vue create demo
  

• 运行vue create demo命令后，我这里选择自动生成一个vue-demo，所有配置和文件自动生成。语言选择的vue3，完成后如二图所示，会提示进入项目目录，并使用npm run serve测试是否成功。这里自行测试，不放图了。
  
  

2. vue添加electron包

• 安装electron环境

    Electron安装
    npm install electron -g
    
    Vue项目添加Electron-builder打包工具
    vue add electron-builder	
  

  ps: 如果出现electron安装失败，或者后面使用electron-builder打包时，出现从github down包失败，请设置electron镜像。

  • 设置镜像方法：

  	npm config edit
  

  使用该命令会弹出npm的配置文档，将以下类容复制到文件末尾。

  electron_mirror=https://npm.taobao.org/mirrors/electron/
  electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/
  

  

3. 测试

npm run serve--网页
npm run electron:serve--客户端

客户端效果：

4. 打包

npm run electron:build

可能出现的错误如下，请按照第2点中的说明配置electron镜像，成功时如图2，实际情况如图3：

5. 附加1 替换客户端图标

上述的打包方式基本无法设置任何东西，包括重要的图标，版本信息等。查看了很多文档，大多是electron项目改图标的方式。特此记录electron打包vue项目改配置信息的方式。

• 进入项目路径，查看是否存在vue.config.js同名文件（好像是vue3没有，vue2会有），没有则创建一个空文件。
  
• 进入编辑类容如下，然后重新打包

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.example.app",
                "productName": "aDemo",//项目名，也是生成的安装文件名，即aDemo.exe
                "copyright": "Copyright © 2019",//版权信息
                "directories": {
                    "output": "./dist"//输出文件路径，之前编译的默认是dist_electron
                },
                "win": {
                    "icon": "Demo.ico"//这里注意配好图标路径
                }
                // options placed here will be merged with default configuration and passed to electron-builder
            }
        }
    }
}

如果想了解更多配置可参考electron-builder的配置：

"build": {
    "productName":"xxxx",		//项目名 这也是生成的exe文件的前缀名
    "appId": "com.xxx.xxxxx",	//包名  
    "copyright":"xxxx",			//版权信息
    "directories": { 			//输出文件夹
      "output": "build"
    }, 
    "nsis": {	//nsis相关配置，打包方式为nsis时生效
      "oneClick": false, 								// 是否一键安装
      "allowElevation": true, 							// 允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, 		// 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",			// 安装图标
      "uninstallerIcon": "./build/icons/bbb.ico",		//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", 	// 安装时头部图标
      "createDesktopShortcut": true, 					// 创建桌面图标
      "createStartMenuShortcut": true,					// 创建开始菜单图标
      "shortcutName": "xxxx", 							// 图标名称
      "include": "build/script/installer.nsh", 			// 包含的自定义nsis脚本
    },
    "publish": [
      {
        "provider": "generic", 		// 服务器提供商，也可以是GitHub等等
        "url": "http://xxxxx/" 		// 服务器地址
      }
    ],
    "win": {
      "icon": "build/icons/aims.ico",
      "target": [
        {
          "target": "nsis",			//使用nsis打成安装包，"portable"打包成免安装版
          "arch": [
            "ia32",				//32位
            "x64" 				//64位
          ]
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "linux": {
      "icon": "build/icons"
    }
  }

6. 附加2 隐藏客户端默认菜单

这里网上没有找到相关的文档，但是查看demo文件后发现，程序的main是background.js，找到它打开编辑，里面是electron代码，直接修改，添加Menu引用，然后设置程序菜单为null，运行发现菜单已经没有了，重新打包即可。

• 最终就是一个有自己图标的无菜单客户端demo。