Vue 打包成桌面应用 vue 打包桌面应用 vue部署为桌面应用 vue部署桌面应用 vue 桌面应用

使用 electronjs 工具 将vue 打包成 桌面应用 ，官方文档： electronjs

第一步 打包 dist

打包 vue项目 得到 dist文件夹

第二步 创建配置文件

main.js

const {
    Menu,
    app,
    BrowserWindow
} = require('electron'); //引入electron
let win;
let windowConfig = {
    width: 800,
    height: 600
}; //窗口配置程序运行窗口的大小
function createWindow() {
    Menu.setApplicationMenu(null) // null值 表示取消顶部菜单栏
    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();
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

package.json

{
    "name": "demo",
    "productName": "项目名称",
    "author": "作者",
    "version": "1.0.4",
    "main": "main.js",
    "description": "项目描述",
    "scripts": {
        "pack": "electron-builder --dir",
        "dist": "electron-builder",
        "postinstall": "electron-builder install-app-deps"
    },
    "build": {
        "electronVersion": "1.8.4",
        "win": {
            "requestedExecutionLevel": "highestAvailable",
            "target": [
                {
                    "target": "nsis",
                    "arch": [
                        "x64"
                    ]
                }
            ]
        },
        "appId": "demo",
        "artifactName": "demo-${version}-${arch}.${ext}",
        "nsis": {
            "artifactName": "demo-${version}-${arch}.${ext}"
        },
        "extraResources": [
            {
                "from": "./static/",
                "to": "app-server",
                "filter": [
                ]
            }
        ],
        "publish": [
            {
                "provider": "generic",
                "url": "http://xxxxx/download/"
            }
        ]
    },
    "dependencies": {
        "core-js": "^2.4.1",
        "electron-packager": "^12.1.0",
        "electron-updater": "^4.0.0"
    },
    "devDependencies": {
        "electron": "^20.0.1"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

第三步 安装 Electron

在 dist 目录中安装 Electron

安装命令：

npm install electron
1

测试 是否安装成功

electron -v
1

如果出现 找不到命令

换一个命令安装 Electron

npm install electron -g
1

第四步 测试运行

完成以上 三步 结构目录应该是酱紫的

其实也可以 第二步 -> 第三步 -> 第一步 这个步骤也可以，先安装 Electron,在把 dist里面的文件复制过来也可以

测试 运行 命令

electron .
1

成功后效果如下：

第五步 安装 electron-builder 打包

安装electron-builder（全局安装）

npm install -g electron-builder

npm install -g electron-package
1
2
3

执行打包命令

electron-builder
1

打包成功后会 创建一个 dist 文件夹

打开 dist文件夹，运行.exe 安装程序运行

常见错误

执行 electron-builder 异常

Package "electron-builder" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json.

这个错误， 打开 package.json

去掉 红色下划线的那一行代码

再执行 electron-builder 打包

vue-element-admin 打包出来 页面跳转不了

1、修改路由模式为 hash

文件路径： \src\router\index.js

const createRouter = () => new Router({
  /**
   *  如果打包的是 web页面 去掉 mode: 'hash' 这行代码 不去掉 刷新会白屏 ，如果 需要使用 electron 打包成 桌面应用 加上  mode: 'hash',  这行代码
   *  使用 electron 打包注意点： https://blog.csdn.net/csdn_zuirenxiao/article/details/124587664
   */
  // mode: 'hash', 
  mode: 'history', 
  scrollBehavior(to, from, savedPosition) {
    // 解决路由跳转后 会滚动到底部
    if (savedPosition) {
      console.info(1)
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  routes: constantRoutes
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2、存储 token 使用 localStorage 代替 Cookies 存储

文件路径：\src\utils\auth.js

import Cookies from 'js-cookie'
// 登录token
const TokenKey = 'token'

/*
// 打包成 web  页面 使用 
export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}
*/

//   使用 electron 打包成 桌面应用 使用，因为 electron 不支持 js-cookie
export function getToken() {
  return localStorage.getItem(TokenKey)
}

export function setToken(token) {
  return localStorage.setItem(TokenKey, token)
}

export function removeToken() {

  return localStorage.removeItem(TokenKey)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

3、config下面的index.js中bulid模块导出的路径

vue2 文件路径： 根目录\vue.config.js
找到 productionSourceMap 配置 修改 为 true

  // productionSourceMap: false, // 打包成 web页面 使用
  productionSourceMap: true, // 使用 electron 打包成 桌面应用 使用，这里必须设置 true，否则token读不到还是无法跳转的

1
2
3

vue3 不太清楚 vue.config 有没有改成其他文件 ，只要找到 productionSourceMap 这个参数就可以了

最后

以上的 package.json 、main.js 中的 部分 配置 需要实际去配置，不然就会出现 请求 后端出现 跨域、路由之类的问题