vue3 引入Electron 并实现打包exe可执行文件

electron官网：https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-first-app

1、安装依赖

npm install electron # 这是原生electron .网上也说可以用vue-cli-pugin-electron-build
npm install electron-packager --save-dev # electron打包插件

npm install terser

npm install @vitejs/plugin-vue-jsx

npm install electron -g

2、vite.config.js部分信息

import {
  defineConfig
} from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import vueJsx from "@vitejs/plugin-vue-jsx"; // jsx插件

export default defineConfig({
  plugins: [vue(), vueJsx()],
  base: './',
  publicDir: './public',
  envDir: 'env',
  resolve: {
    //设置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
      '*': path.resolve(''),
    },
  },
  server: {
    port: 7746,
  },
  // 引入第三方的配置,强制预构建插件包
  optimizeDeps: {
    include: ['axios', 'mockjs'],
  },
  css: {
    preprocessorOptions: {
      scss: {
        charset: false, // 关闭编译时 字符编码 报错问题
        javascriptEnabled: true,
        //additionalData: `@import "${resolve(__dirname, 'src/assets/css/var.scss')}";`,
      },
    },
  },
  json: {
    //是否支持从 .json 文件中进行按名导入 
    namedExports: true,
    //若设置为 true 导入的json会被转为 export default JSON.parse("..") 会比转译成对象字面量性能更好 
    stringify: false,
  },
  //继承自 esbuild 转换选项，最常见的用例是自定义 JSX 
  esbuild: {
    jsxFactory: "h",
    jsxFragment: "Fragment",
    jsxInject: `import Vue from 'vue'`
  },
  // 打包配置
  build: {
    target: 'modules', // 设置最终构建的浏览器兼容目标。modules:支持原生 ES 模块的浏览器
    outDir: 'dist', // 指定输出路径
    assetsDir: 'assets', // 指定生成静态资源的存放路径
    assetsInlineLimit: 4096, // 小于此阈值的导入或引用资源将内联为base64编码，设置为0可禁用此项。默认4096（4kb）
    cssCodeSplit: true, // 启用/禁用CSS代码拆分，如果禁用，整个项目的所有CSS将被提取到一个CSS文件中,默认true
    sourcemap: false, // 构建后是否生成 source map 文件
    minify: 'terser', // 混淆器，terser构建后文件体积更小
    write: true, //设置为 false 来禁用将构建后的文件写入磁盘  
    emptyOutDir: true, //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。  
    chunkSizeWarningLimit: 5000000000, //chunk 大小警告的限制 
    terserOptions: {
      compress: {
        drop_console: false, // 打包时不删除console.log日志.否则无法调试
        drop_debugger: true,
      },
    } //去除 console debugger
  },
});

3、在与src同级目录下新建index.js文件

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


const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 800,
        autoHideMenuBar: true, // 自动隐藏菜单栏
        webPreferences: {
            // 是否启用Node integration
            nodeIntegration: true, // Electron 5.0.0 版本之后它将被默认false
            // 是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本.默认为 true
            contextIsolation: false, // Electron 12 版本之后它将被默认true
            nodeIntegrationInWorker: true,
            // 禁用同源策略，允许跨域
            webSecurity: false,
            // preload: path.join(__dirname, 'preload.js'),

        }
    })
    // 如果没有修改vite端口 默认为5173
    win.loadURL("http://localhost:8888")
}

app.whenReady().then(() => {
    createWindow();

    app.on('activate', () => {
        // 在 macOS 系统内, 如果没有已开启的应用窗口
        // 点击托盘图标时通常会重新创建一个新窗口
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
});

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

// 当Electron完成初始化时
app.on('ready', () => {
    // 清空应用菜单
    Menu.setApplicationMenu(null);
});

4、在package.json文件中新增

"main": "index.js",
"scripts": {
        "start": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "electron:serve": "vite build & electron . ",
        "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
    },

5、运行打包命令

运行：

npm run electron:serve

打包：

npm run packager