electron打包若依前后端分离项目，打包成exe客户端，自动化部署到Windows服务器

李子菜

已于 2022-07-18 16:27:01 修改

阅读量8.7k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： vue element 文章标签： electron

于 2022-07-18 16:20:02 首次发布

本文链接：https://blog.csdn.net/liqi939597/article/details/125849988

vue element 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何从修改package.json和vue.config.js配置，到打包、部署和免安装应用的全过程，包括使用Electron、InnoSetup和各种技术整合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、修改项目package.json中的配置

# 前端配置
# package.json中修改配置 插入 package
"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build --mode production",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    
    "package": "electron-packager ./dist/   --icon=./src/assets/logo/logo.png  --overwrite"
  },

# 引入包
"devDependencies":{
    "electron": "^15.3.1",
    "electron-packager": "^15.4.0",
}
# 执行 cnpm install 下载electron包
# 执行 npm cache clean --force 清除缓存

二、修改 vue.config.js 中的配置

# 修改静态资源路径
publicPath: './',

# 修改接口地址访问路径，还有修改生产环境接口地址
target: `http://127.0.0.1:8082/label-admin`

三、将router中的配置由history改为hash或者注释调

四、将Navbar中的退出跳转路径改为项目地址

五、将项目中的Cookie改为sessionStorage

 const username = sessionStorage .getItem("username");
 const password = sessionStorage .getItem("password");
 const rememberMe = sessionStorage .getItem("rememberMe");

 sessionStorage .setItem("username",this.loginForm.username);
 sessionStorage .setItem("password",encrypt(this.loginForm.password));
 sessionStorage .setItem("rememberMe",this.loginForm.rememberMe);

 sessionStorage .removeItem("username");
 sessionStorage .removeItem("password");
 sessionStorage .removeItem("rememberMe");

/* 登录成功之后的toke配置*/
export function setToken(token) {
  return sessionStorage.setItem(TokenKey, token)
  //return Cookies.get(TokenKey)
  //return Cookies.set(TokenKey, token)
}

六、执行 npm run build:prod 打包前端项目为dist文件

七、在dist文件夹下新建package.json文件和main.js文件

package.json配置

{
  "name": "demo",
  "productName": "demo",
  "author": "diaosi",
  "version": "1.0.0",
  "main": "main.js",
  "description": "项目描述"
}

main.js配置 win.webContents.openDevTools(); 可以控制调试工具的开启

const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
  width:800,
  height:600
};//窗口配置程序运行窗口的大小
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();
  }
});

八、运行 npm run package 进行进行打包

九、下载innosetup打包工具进行安装

十、下载tomcat、jdk、mysql、redis免安装版

十一、新建一个文件夹放文件