Vue文件打包成.exe桌面文件(electron)

目录

前提 

文件配置

安装命令

最后

---

前提 

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

2.注意查看自己的接口地址用不用切换 (我之前打包好了才发现没换 坑到自己 惨痛的经历)

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

4.在 dist 文件夹下 创建main.js 和 package.json 和 index.html 

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"
  }
}

   这一块就是 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 就是你 生成文件的文件夹 

可以根据需要更改你想要的文件夹名 还有这个 应用名

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

 多尝试几遍 就能成功的 加油!

还能打个压缩包给你的朋友去玩玩你的作品   

结合各方大佬的资料 然后自己整合来的 附上原文链接 (感谢大佬)

vue+electron打包桌面应用_yan_hai_的博客-CSDN博客

​​​​​​--version does not take an argument. Perhaps you meant --app-version or --electron-version?_Sea_Fest的博客-CSDN博客


【最简单】Electron 怎么将网页打包成桌面应用（web前端页面怎么生成exe可执行文件）_林洪炳的日常技术积累-CSDN博客_如何将网页做成exe