vue项目打包为桌面应用程序

1、vueee-cli通过Vue-cli创建 项目

vue create electron-vue-start

2、在Vue项目下，命令执行

vue add electron-builder

注：执行过程中可能会出现错误。如果有错误，他会提示哪个命令没有成功执行。建议使用cnpm（淘宝镜像）执行失败的命令

3、执行命令检查项目能否运行

npm run electron:serve

4、在项目根目录中添加vue.config.js配置文件，包装配置如下

module.exports = {  ////打包应用程序配置  pluginOptions: {    // vue-cli-plugin-electron-builder 配置    electronBuilder: {      builderOptions: {        // 设置包装后的应用名称        productName: 'HuaXin_Mall',        win: {          icon: 'public/huaxin.ico',          // 图标路径 icon在windows系统中需要256*256的ico格式图片，更换应用程序图标也在这里          target: [{            // 打包成独立的 exe 安装程序            target: 'nsis',            // 这意味着32 bit + 64 bit包，但需要注意的是，这样包装的安装包体积比较大            arch: [              'x64'              // 'ia32'            ]          }]        },        dmg: {          contents: [            {              x: 410,              y: 150,              type: 'link',              path: '/Applications'            },            {              x: 130,              y: 150,              type: 'file'            }          ]        },        linux: {          // 设置linux的图标          icon: 'public/huaxin.ico',          target: 'AppImage'        },        mac: {          icon: 'public/huaxin.ico'        },        files: [**/*]，        extraResources: {          // 将dlll等静态文件复制到指定位置，否则打包后会出现找不到大dll的问题          from: 'resources/',          to: './'        },        asar: false,        nsis: {          // 建议是一键安装吗？ false，如果是true，当用户双击构建的程序时，可以让用户点击下一步、下一步、下一步的形式安装程序，自动安装程序并打开，即：一键安装（one-click installer）          oneClick: false,          // 允许提高请求。 如果是false，用户必须使用提升权重新启动安装程序。          allowElevation: true,          // 建议修改安装目录 true，默认情况下，用户是否允许更改安装目录          allowToChangeInstallationDirectory: true,          // 安装图标          installerIcon: 'public/huaxin.ico',          // 卸载图标          uninstallerIcon: 'public/huaxin.ico',          // 头部图标安装时          installerHeaderIcon: 'public/huaxin.ico',          // 创建桌面图标          createDesktopShortcut: true,          // 创建开始菜单图标          createStartMenuShortcut: true        }      },      chainWebpackMainProcess: config => {        config.plugin('define').tap(args => {          args[0].IS_ELECTRON = true          return args        })      },      chainWebpackRendererProcess: config => {        config.plugin('define').tap(args => {          args[0].IS_ELECTRON = true          return args        })      }    }  }};

5、执行包装命令

npm run electron:build

• 1

6、实施成功后，目录如下(包装过程中出现错误，可再次实施)

7、Electron的功能也可以自己编写，主流程文件在src下的background.js

8、如果要打包的应用程序不显示菜单栏

(1)引入Menu模块

(2)createWindow方法

9、包装成功后，应用程序示例