Vue+Electron 项目打包基础配置

我是使用Electron builder进行Vue项目打包的

一、修改工程名称以及图标

在工程根目录下新建一个vue.config.js文件，并做如下配置：

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

 

二、隐藏默认菜单栏

修改background.js文件

import { app, protocol, BrowserWindow, Menu} from 'electron'


async function createWindow() {
  // Create the browser window.
  //隐藏菜单栏
  Menu.setApplicationMenu(null)
  }

 

 三、如果build文件有问题，可以开启调试模式

win.webContents.openDevTools()