vue打包桌面程序

2022-08-21 22:11| 来源: 网络整理| 查看: 265

1.创建项目

vue create electron-vue-start

在这里插入图片描述

2.安装electron-builder

vue add electron-builder

会报错：在这里插入图片描述

解决方案：

cnpm install --loglevel error

在这里插入图片描述

3.运行看效果：在这里插入图片描述

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

module.exports = { //打包为应用程序配置 pluginOptions: { // vue-cli-plugin-electron-builder 配置 electronBuilder: { builderOptions: { // 设置打包之后的应用名称 productName: 'HuaXin_Mall', win: { icon: 'public/huaxin.ico', // 图标路径 windows系统中icon需要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: { // 拷贝dll等静态文件到指定位置,否则打包之后回出现找不大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

如果执行失败：在电脑的配置环境里面加上变量名：ELECTRON_MIRROR 变量值：https://cdn.npm.taobao.org/dist/electron/ 在这里插入图片描述

6、执行成功后目录如下（打包过程中出现错误，可再执行一遍）在这里插入图片描述 7、也可以自行编写Electron的功能，主进程文件在src下的background.js 8、如果想让打包的应用程序不显示菜单栏（1）引入Menu模块（2）在createWindow方法里 9、打包成功后应用程序示例

【本文地址】

公司简介

联系我们

vue打包 桌面程序

vue打包桌面程序