electron打包vue项目为exe问题记录（若依前后端分离vue2，亲测有效无坑版）

实现思路：从electron官网上拉取代码，把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html，输入打包exe的命令即可。

1、 拉取electron官网上的demo，拉下来之后安装依赖，项目跑起来之后，就不用管demo了，开始配置自己的Vue项目

git clone https://github.com/electron/electron-quick-start   //拉项目
npm i    //进入项目安装依赖
npm run start  //运行程序

2、vue项目相关修改
(1).修改vue.config.js，路径必须修改为 ./，不是这个后续打包好的页面可能会出现白屏，加载不出来的情况

module.exports = {   
	publicPath: './',   
} 
//若依项目里面是分环境，这边直接"./"不分环境

(2).打包自己的Vue项目（npm run build），将打包出来的 dist 文件夹复制到之前拉取的electron-quick-start文件夹中，和node_modules同级

3.在electron-quick-start项目中，下载打包需要的依赖 electron-packager

npm install electron-packager --save-dev

4.进入electron-quick-start项目，删除项目根目录下的 index.html 文件

5.在electron-quick-start项目中找到入口文件 main.js ，修改打包的文件路径为我们的index.html（替换成我们的文件非常非常的重要，注意行数，一般都在16行多一点）

// main.js 原始内容 
mainWindow.loadFile('index.html') 
// 修改后的内容 
mainWindow.loadFile('./dist/index.html')*

//=========下面是可选部分
// 这段代码可以删除exe菜单栏
mainWindow.setMenu(null);
// 这段可以打开浏览器调试窗口
mainWindow.webContents.openDevTools();

6.在electron-quick-start项目中，进入 package.json ，在 scripts 中添加 packager 指令，如下所示：

"scripts": { 
"start": "electron .", 
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
//或者下面比较全  DR-文件名  icon-文件图标（必须为.ico格式才显示） out-输出文件夹  最后版本号等
"packager": "electron-packager ./ DR --platform=win32 --arch=x64 --icon=./dist/logo1.ico --out=./out --asar --app-version=0.0.2"
} 

7.运行命令打包，然后项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件

npm run packager 

打包完以后，项目中会出现 App-win32-x64文件夹，进去之后，双击App.exe就可以访问了

上述转载并修改自
Vue项目打包成exe可执行文件（无瑕疵，完美版）

期间遇到的问题：

1. 登录不跳转

• 全局Cookies替换成localStorage

 Cookies.get  改为 localStorage.getItem
 Cookies.set  改为  localStorage.setItem
 Cookies.remove  改为 localStorage.removeItem

• axios中的baseURL不分环境，直接写后台访问地址

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  // baseURL: process.env.VUE_APP_BASE_API,
  baseURL: "http://127.0.0.1:8091/hm",    // 直接写后台接口地址
  // 超时
  timeout: 10000,
});

• 路由中的模式history换成hash或者注释掉

export default new Router({
  mode: "hash", // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
});

2. 登录成功跳转，但是动态的路由都不能跳转（错误： Error: Cannot find module ‘@/views/index’），解决：

• 修改vue-router版本（将原先的3.4.9改为3.0.7并且删除node_modules和package-lock.json重新 npm install,如果报错其他依赖则根据报错修改）

"dependencies": {
    。。。
    "vue-router": "3.0.7",   //我将原先的3.4.9改为3.0.7 
    "vuedraggable": "2.24.3",
    "vuex": "3.6.0"
  },
  "devDependencies": {
	。。。
    "eslint": "^7.0.0",   //我这边校验的依赖根据报错都升级了版本
    "eslint-plugin-vue": "7.0.0"，
  },

3. 路由点击可以跳转，但每次点击菜单控制台都报错（错误：Cannot read property ‘catch‘ of undefined）。把路由的 index.js中的这段代码删掉即可。

// 防止连续点击多次路由报错
// let routerPush = Router.prototype.push;
// Router.prototype.push = function push(location) {
//   return routerPush.call(this, location).catch((err) => err);
// };

4. 右上角退出登录，显示白屏，解决：

//全局搜索 "LogOut",将location.href = "/index"改为this.$router.push("/login");
async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            //location.href = "/index";
            this.$router.push('/login')
          });
        })
        .catch(() => { });
    },

美化exe左上角图标（在electron的package.json中添加）上面第5点设置了图标，此处可忽略不看：

"build": {
  "appId": "001-AAA", // 程序包名
  "copyright": "001", // 版权相关信息
  "productName": "AAA",  // 项目名字
  "dmg": {
    // "background": "res/background.png",  // 背景图片的路径
    "window": {
		// 启动后窗口左上角位置
		      "x": 100,
		      "y": 100,
		// 启动后窗口的大小
		      "width": 800,
		      "height": 500
		    }
  },
  "win": {
	// 打包后的文件会有个图标，这个图标的路径，不指定的话默认的不好看
    "icon": "res/logo.png"
  }

附上图标png在线转ico格式网址

png转ico

参考文章：

【前端问题记录】前端报错：Error: Cannot find module ‘@/views/index’

之后若要继续打包成安装包，可参考如下连接，测试有效：

vue项目打包桌面应用 exe程序 以及打包为安装程序exe