vite单独打包element vue 打包成exe

转载

lemon 2024-06-12 15:29:22

文章标签 vite单独打包element electron vue.js json html 文章分类 机器学习人工智能

前提

文件配置

安装命令

最后

前提

1.你需要有一个完整的 vue项目

2.注意查看自己的接口地址用不用切换

3.需要你 npm run build 先打包一遍生成 dist

4.在 dist

1.在项目里面会有index.html 所以不用自己生成
2.pageage.json (也别自己建看下文)
3.只需要建main.js

文件配置

1. npm install electron
electron -v 检查下版本是否下载成功
先下载这一步这样就会自动帮你生成 package.json 然后你再去json里面改代码
不然直接新建package.json 然后跑命令会直接报错

main.js 文件的配置如下根据你的需要去调整

const {app, BrowserWindow} =require('electron');//引入electron
let win;
let mainWindow;
let windowConfig = {
  width:800,//创建窗口的宽度
  height:600,//窗口高度
  webPreferences: {//解决跨域问题
    webSecurity: false
  }
};//窗口配置程序运行窗口的大小
function createWindow(){
  win = new BrowserWindow(windowConfig);//创建一个窗口
  win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
  win.webContents.openDevTools();  //开启调试工具
  win.on('close',() => {
    //回收BrowserWindow对象
    win = null;
  });
  win.on('resize',() => {
    win.reload();
  }) 
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
  app.quit();
});
app.on('activate',() => {
  if(win == null){
    createWindow();
  }
});

package.json 的配置如下 根据你的需要去调整

{
  "name": "dist",
  "version": "1.0.1",
  "description": "",
  "main": "main.js",
  "build": {
    "appId": "com.leon.HelloWorld02",
    "copyright": "LEON",
    "productName": "订餐系统",
    "dmg": {
      "background": "res/background.png",
      "window": {
        "x": 100,
        "y": 100,
        "width": 500,
        "height": 300
      }
    },
    "win": {
      "icon": "res/icon.ico"
    }
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "electron": "7.1.2",
    "electron-builder": "^22.8.0",
    "electron-package": "^0.1.0"
  }
}

vite单独打包element vue 打包成exe_json

这一块就是 dist 文件夹内的

安装命令

dist 目录下安装依赖

2. 执行命令npm run start，如果项目运行起来了说明electron安装成功
3.如果你运行成功了那么现在已经成功一半了
然后再依次安装
npm install electron-builder
npm install electron-package

最后

在终端运行这一串代码进行打包压缩

electron-packager . app --win --out demoapp --arch=x64 --electron-version 1.4.14 --overwrite --ignore=node_modules
说明:
这个命令什么意思？加粗部分可自行修改：
electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --version版本号 --overwrite --ignore=node_modules

.app 就是你生成 exe 的名字
demoapp 就是你生成文件的文件夹
可以根据需要更改你想要的文件夹名还有这个应用名

最后就会生成你打包出来的桌面端文件了美滋滋

vite单独打包element vue 打包成exe_json_02