electron打包桌面端（多端）

框架：vue3+vite+js+axios

步骤1:安装插件

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/   
npm i electron -D
npm i electron-reload  -D  
npm i electron-builder -D  

ps：如果包在package.json的dependencies配置里，要手动放到devDependencies配置里，重新npm install。

步骤2:electron文件配置

与src同级：electron文件->main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
 
function createWindow() {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 书写渲染进程中的配置
      nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
      contextIsolation: false, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
      webSecurity: false, // 默认为 true，通常不建议禁用它 
    },
  })
 
  let env = 'pro2'
  // 配置热更新
  if (env == 'pro') {
    const elePath = path.join(__dirname, '../node_modules/electron')
    require('electron-reload')('../', {
      electron: require(elePath),
    })
    // 热更新监听窗口
    mainWindow.loadURL('http://localhost:8888')
    // 打开开发工具
    mainWindow.webContents.openDevTools()
  } else {
    // 生产环境中要加载文件，打包的版本
    // Menu.setApplicationMenu(null)
    // 加载 index.html
    mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增
  }
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()
 
  app.on('activate', function () {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
 
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

步骤3:electron-builder文件配置

与src同级electron-builder.json

{
  "productName": "app名字",
  "files": ["./electron/main.js", "./dist"],
  "extraFiles": ["./videos", "./cvideo"], 
  "directories": {
    "output": "./buileder"
  }
}

步骤4:修改vite.config.js，把base修改如下

base: './', // 新增

步骤5:配置package.json（本地运行命令与打包命令），如果需要本地调试com+shift+i（苹果）

"start": "electron .",
"electron:build": "vite build & electron-builder build --config electron-builder.json"

步骤6:配置接口通信，修改request.js的axios，加上http请求拦截。

service.interceptors.request.use(
  config => {
    const token = getItem('token');
    if (token) {
      config.headers['Authorization'] = token;
    }
    if (!config.url.includes('http')) {
      config.url = API_BASE_PREFIX   //补上你的请求路径
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

总结：以上仅个人整理，所以写的比较笼统