使用Electron + Vite + Vue3实现跨平台终端，并踏MacOS打包windows包+Mac包的坑

原创

已于 2024-09-09 15:24:30 修改 · 944 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#electron #macos #windows

于 2024-09-09 12:01:04 首次发布

前言

一、创建Vue3项目，具体步骤

创建Vue3 项目

npm create vite@latest my-terminal-app --template vue
cd my-terminal-app
npm install

安装 Electron
接下来，安装 Electron 和一些开发依赖：

npm install electron --save-dev
npm install electron-builder --save-dev

设置 Electron 主进程
在项目根目录下创建 electron 文件夹，并在其中创建 main.js 文件。这个文件将作为 Electron 的主进程。

// src-electron/main.js
const {
   
    app, BrowserWindow, Menu } = require('electron')
const {
   
    join } = require('path')
// 屏蔽安全警告
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
// 创建浏览器窗口时,调用这个函数。
const createWindow = () => {
   
   
    const win = new BrowserWindow({
   
   
        width: 800,
        height: 600,
        title: '张小个子',
        icon: join(__dirname, '../public/logo.png'),
        nodeIntegration: true, // 启用 Node.js 集成
        contextIsolation: false,// 禁用上下文隔离（Node.js 集成的一个选项）
        // websecurity: false,// 禁用同源策略
        contextIsolation: false,
        session: {
   
   
            cookies: true // 这行确保启用了cookie
        }
    })
    // development模式
    if (process.env.VITE_DEV_SERVER_URL) {
   
   
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
        // 开启调试台
        win.webContents.openDevTools()
    } else {
   
   
        win.loadFile(join(__dirname, '../dist/index.html'))
    }
}
//设置中文菜单,默认是英文的 
const createMenu = () => {
   
   
    const template = [
        {
   
   
            label: '文件',
            submenu: [
                {
   
   
                    label: '退出',
                    accelerator: 'CmdOrCtrl+Q',
                    click: () => {
   
   
                        app.quit();