vue项目使用electron进行打包（webpack vite）

lunaʚゞɞ

已于 2022-08-23 16:20:41 修改

阅读量695

点赞数

文章标签： electron 前端 javascript

于 2022-08-22 16:19:50 首次发布

原文链接：csdn.com

版权

Vue CLI Plugin Electron Builder

仅支持cli4以上 v2 v3皆可

安装依赖

npm install electron

vue add electron-builder

安装完毕后

npm run electron:serve 开发运行

npm run electron:build 打包成exe文件

修改logo图片和应用名字配置

根目录下 vue.config.js文件
使用时候请去掉里面的注释，不然跑不起来。
我下面引入的图片里面有一个build/logo.ico的文件，这个文件大小必须是256*256的
创建一个文件夹，图片放进去就行
module.exports = {
	pluginOptions: {
		electronBuilder: {
			builderOptions: {
				nsis: {
				  allowToChangeInstallationDirectory: true,
				  oneClick: false,
				  installerIcon: "./build/logo.ico",  //安装logo
				  installerHeaderIcon: "./build/logo.ico" //安装logo
				},
				electronDownload: {
					mirror: "https://npm.taobao.org/mirrors/electron/" //镜像设置
				},
				win: {
					icon: './build/logo.ico' //打包windows版本的logo
				},
				productName: "应用名称",  //应用的名称
			}
		}
	},
}

隐藏菜单栏目：根目录下src/background.js文件，找到app.on方法 (按照步骤来做，会生成这个文件的)

app.on('ready', async () => {
//这里注释掉，没啥用
   // if (isDevelopment && !process.env.IS_TEST) {
   //    // Install Vue Devtools
   //    try {
   //        await installExtension(VUEJS_DEVTOOLS)
   //    } catch (e) {
   //        console.error('Vue Devtools failed to install:', e.toString())
   //    }
   // }
   createWindow()
   // 隐藏菜单栏
   const {
       Menu
   } = require('electron');
   Menu.setApplicationMenu(null);
   // hide menu for Mac
   if (process.platform !== 'darwin') {
       app.dock.hide();
   }
})
设定宽高也在这个文件里面

const win = new BrowserWindow({
       width: 1000,
       height: 800,
       title: '标题',
       webPreferences: {
           // Use pluginOptions.nodeIntegration, leave this alone
           // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
           nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
           contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
       }
   })
一堆堆操作后，你就能够得到一个有自己图标并且没有菜单栏的exe文件以及安装包和文件。