electron vite vue打包

bibibabibobi k

已于 2024-03-27 09:16:43 修改

阅读量1.4k

点赞数 30

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript electron

于 2024-03-27 09:04:19 首次发布

本文链接：https://blog.youkuaiyun.com/u011444756/article/details/137064885

1. 安装所需依赖

electron
concurrently：阻塞运行多个命令，-k参数用来清除其它已经存在或者挂掉的进程
wait-on：等待资源，此处用来等待url可访问
cross-env: 该库让开发者只需要注重环境变量的设置，而无需担心平台设置
electron-builder: electron打包库

npm install electron --save-dev
npm install concurrently wait-on --save-dev
npm install cross-env electron-builder  --save-dev

2. 配置文件

vite.config

import {
     
      defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'                                         // 新增

// https://vitejs.dev/config/
export default defineConfig({
     
     
  base: path.resolve(__dirname, './dist/'),    // 新增
  plugins: [vue()]
})

新建electron文件夹

main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
const {
       
        app, BrowserWindow, Menu } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV

function createWindow() {
       
       
    // 隐藏菜单栏
    Menu.setApplicationMenu(null)
    // 创建浏览器窗口
    const mainWindow = new BrowserWindow({
       
       
        width: 1800,
        height: 900,
        webPreferences: {
       
       
            preload: path.join(__dirname, 'preload.js')
        }
    }