利用Electron给Vue项目打包成exe文件_vue3 打包成exe-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73938805/article/details/143692084

官方文章

参考文档

【教程】将Vue项目打包为exe项目的教程-我的第一个原生Vue项目_vue打包exe-优快云博客

正文

因为我的项目是vue3的项目，所以我使用的脚手架设置路径。

建议往后都使用cnpm，npm太容易报错了。

 cnpm install -g @vue/cli

我担心我的nodejs的版本过高换了一个低版本的nodejs对代码打包编译，可以参考一下

node和npm的版本如下：

之后我们开始对编译做准备：

1.使用命令vue ui进入ui界面设置路径

检查路径是否有什么问题。

2.当前的vue项目一定不能使用history模式，可以采用hash模式

我的代码是这样的：

将history改成hash的方式

import { createRouter, createWebHistory } from "vue-router";
import Home from "../components/HomeView.vue";
import MapPage from "../components/MapPage.vue";
import first from "../components/InitMap.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: { breadcrumb: "首页" },
  },
  {
    path: "/",
    component: MapPage,
    children: [
      {
        path: "first",
        name: "first",
        component: first,
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../components/HomeView.vue";
import MapPage from "../components/MapPage.vue";
import first from "../components/InitMap.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: { breadcrumb: "首页" },
  },
  {
    path: "/",
    component: MapPage,
    children: [
      {
        path: "first",
        name: "first",
        component: first,
      },
    ],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

如果不改这个模式的话，预览打开的程序是一片空白的。

3.前端打包

npm run build

将前端代码打包成dist文件夹

4.拉取`electron-quick-start`项目

可以去github下也可以，用命令也可以。

git clone https://github.com/electron/electron-quick-start

拉取成功后，我们进入electron-quick-start文件夹，删除里面的index.html文件，并将我们刚才打包得到的dist文件夹拷贝到当前目录下

5.修改配置文件

我们在electron-quick-start文件夹下，打开main.js文件，并做如下修改：

/* 修改前 */
mainWindow.loadFile('index.html')

/* 修改后 */
mainWindow.loadFile('./dist/index.html')

6. 启动项目

使用命令启动当前的electron-quick-start项目。

记得使用cnpm.......npm报错太厉害了

cnpm install //下载需要的包
npm run start //启动当前的项目，预览软件长啥样的

在node_modules中找到这个包就说明能成功预览了.这个包一定得下载下来。

启动后是如此样貌：

里面的内容就不演示了，这里虽然成功了，但用这种方法打包后处理有路径问题...在宝塔面板部署都不存在的问题，用了这个插件会出现，应该是插件本身的问题.

后面我的解决方案从改js的地址到在当前系统的文件夹中放入需要请求的数据.....

改地址有思路，但是实践起来的可行性太低了。

先来看一下路径的报错吧

请求json串和png的路径出了大问题。

给一个思路：可以找到自己需要的静态文件，然后在dist的js文件中找到该静态文件的路径，然后根据需求进行更改。

我觉得太麻烦了，所以采用了最简单的路径方法。

首先因为用vue的特性，所以存在public和src两个文件夹，但打包后不是这样的，所以是插件解析的问题，比如在vue项目中如下的一个路径：

  axios
    .get("information.json")

information.json在public下面就可以被访问到

但是当打包成dist文件夹后，再被electron渲染后它的路径会变成你当前项目的电脑主路径，我的项目在E盘，所以它的主路径就变成了E盘而不是什么public下面.....

所以我将需要的文件拷到E盘下就能解决当前问题。

我的E盘也就变成了这样（全是需要用到的文件...

最后启动项目预览当然是成功了，但是还没有结束，我们想要的是把当前vue项目打包成exe，但是还差最后一步，就是打包。

7.打包

为避免node版本较低导致的错误，可以使用nvm切换当前node版本，此处不再赘述

安装打包依赖(记得用cnpm

cnpm install --save-dev electron
cnpm install electron-packager --save-dev

--download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/

如果Downloading electron-vxxx-xx-xx.zip下载太慢，可以从官方发布手动下载它。地址Releases · electron/electron

并添加参数： --electron-zip-dir=zip文件地址以手动指定zip

也可以添加参数--download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ 来指定镜像源下载（淘宝为例）

现在教大家施法咒语（米斯卡木斯卡芜湖）

electron-packager <sourcedir>(项目路径) <appname>(项目的名字) --platform=<platform> --arch=<arch> (平台以及架构)

如果出现：Failed to locate module "debug" from xxx\node_modules\electron-squirrel-startup

可以添加参数 --ignore=node_modules忽略报错

最后附上笔者的咒语（npm脚本）

electron-packager .\\ demoapp --win --arch=x64 --out .\\out --electron-zip-dir=.\\out --ignore=node_modules

项目打包命令

npm run packager

和项目结构

我们来看一下配置

  "scripts": {
    "start": "electron-forge start",
    "packager": "electron-packager .\\ demoapp --win --arch=x64 --out .\\out --electron-zip-dir=.\\out --ignore=node_modules",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "electron": "electron .",
    "dist": "npm run build && electron-builder"
  }

最后完美解决所有的问题打包成exe

我们来看一下最后的文件夹