vue.js 2前端开发的项目通过electron打包成exe

前提

1. 项目是用 vue-cli 创建的（Vue 2 基本都是）
2. 已全局安装 @vue/cli（如果没有：npm i -g @vue/cli）

cd your-vue2-project

步骤（保姆级）

1.安装依赖、启动项目

vue add electron-builder

• 过程中会问你选 vue版本 → 选 2
• 可能会问是否安装 electron-updater → 建议选 Yes（方便以后做更新）
• 如果卡住或报错，建议换淘宝镜像重试：

npm config set registry https://registry.npmmirror.com
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

启动开发模式（推荐先跑通）

npm run electron:serve
# 或 yarn electron:serve

1. 修改 vue.config.js（很重要！防止打包后白屏）

// vue.config.js（如果没有就创建）
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  
  pluginOptions: {
    electronBuilder: {
      // 如果你有 preload 脚本可以在这里配置
      preload: 'src/preload.js',   // 可选
      // 打包后主进程文件（一般自动生成不用改）
      mainProcessFile: 'src/background.js'
    }
  }
}

1. 打包成 exe（WindowsBash

   npm run electron:build -- --win

   或只打 windows 安装包

   npm run electron:build

打包完成后，在项目根目录下会出现：

• dist_electron/ 或 dist/ 文件夹
• 里面有 你的应用名 Setup 1.0.0.exe（安装包）
• 也有绿色免安装版（win-unpacked 文件夹里的 .exe）

双击 exe 就能运行（安装版会创建桌面图标、开始菜单等）。

2. 处理问题

1.去掉窗口顶部的菜单栏--background.js

import { app, protocol, BrowserWindow ,Menu} from 'electron'


Menu.setApplicationMenu(null)  // 去掉整个应用菜单栏

2. router需要由history改成hash模式

路由模式问题（最常见） ：Vue Router 默认为 history 模式，在 Electron 的 app:// 协议下（没有服务器端重定向支持）会导致路径解析失败。必须使用 hash 模式。

// 判断是否为 Electron 环境
const isElectron = navigator.userAgent.toLowerCase().indexOf('electron') > -1

const router = new Router({
  mode: isElectron ? "hash" : "history", // Electron 下强制使用 hash 模式
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
});

3.接口请求前缀处理

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 30000,
});

// 关键修改在这里：动态 baseURL
let baseURL = ''
// 判断是否为 Electron 环境 (兼容 contextIsolation)
const isElectron = navigator.userAgent.toLowerCase().indexOf('electron') > -1

if (process.env.NODE_ENV === 'production' && isElectron) {
  // Electron 打包后（生产环境）
  baseURL = 'http://113.194.xxx.xxx:xx/prod-api'  // 生产环境地址
  // 如果正式环境不同，可以再用 process.env.VUE_APP_API_URL 等区分
} else {
  // 开发环境（包括 electron:serve），走代理
  baseURL = process.env.VUE_APP_BASE_API || '/prod-api'
}

service.defaults.baseURL = baseURL

4.Token存储问题

在 Electron 环境下改用 localStorage 存储 Token，确保数据能持久化；Web 端继续使用 Cookie。

js-cookie 在 Electron 的本地文件协议下可能无法正确持久化 Token。如果 Token 存不进去， getToken() 取不到值，路由守卫 ( permission.js ) 就会把你弹回登录页。

import Cookies from "js-cookie";

const TokenKey = `Admin_Token_${getPort()}`;
// 判断是否为 Electron 环境
const isElectron = navigator.userAgent.toLowerCase().indexOf('electron') > -1

function getPort() {
  if (location.port) return location.port;
  return location.protocol === "https:" ? "443" : "80";
}

export function getToken() {
  if (isElectron) {
    return localStorage.getItem(TokenKey);
  }
  return Cookies.get(TokenKey);
}

export function setToken(token) {
  if (isElectron) {
    return localStorage.setItem(TokenKey, token);
  }
  return Cookies.set(TokenKey, token);
}

export function removeToken() {
  if (isElectron) {
    return localStorage.removeItem(TokenKey);
  }
  return Cookies.remove(TokenKey);
}