使用到的 工具 electron

使用 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.htmlwin.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();}
});

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"}
}

第三步 安装 Electron

在 dist 目录中安装 Electron

安装命令：

npm install electron

测试 是否安装成功

electron -v

如果出现 找不到命令

换一个命令安装 Electron

npm install electron -g

第四步 测试运行

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

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

测试 运行 命令

electron .

成功后效果如下：

第五步 安装 electron-builder 打包

安装electron-builder（全局安装）

npm install -g electron-buildernpm install -g electron-package

执行打包命令

electron-builder

打包成功后会 创建一个 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 打包

运行，页面空白

检查 package.json 静态资源文件夹是否配置值正确

整体文件夹目录

• index.html
• favicon.ico
• statis

检查 vue.config 静态资源文件夹是否配置值正确

有些是 vue.config.js

  publicPath: './',outputDir: 'dist',assetsDir: 'static',

有些是 index.js

assetsPublicPath : './'

除了上面三个文件(vue打包dist 里面的文件)，其他的都是 Electron 配置文件

外部JS使用 router跳转、location.href 跳转 失效

外部js 不建议使用 location.href 跳转 使用 router

// 引入路由
import router from '@/router'
// 环境判断
const isWeb = trueif (isWeb === false) {// electron 桌面应用环境router.push({path: '/login'})}location.reload();} else {// vue  web应用环境router.push({path: '/login'})
}

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
})

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)
}

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

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

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

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

最后

以上的 Electron 配置 - package.json 、main.js 都只是基础配置， 如果 还需要更改应用图标等配置请参考 官方文档，部分 配置 需要实际去配置，不然就会出现 请求 后端出现 跨域、路由之类的问题(没出现就不需要管)

Vue 打包 成 桌面应用 vue打包成桌面应用 vue 打包桌面应用 vue 部署 桌面应用 vue部署为桌面应用 vue部署 为 桌面应用 vue 桌面应用相关推荐

1. python3.6打包成exe可执行文件、已解决方案_Python 3.6打包成EXE可执行程序的实现...

   1.下载pyinstaller python 3.6 已经自己安装了pip,所以只需要执行 pip install pyinstaller就可以了 2.打包程序 进入到你你需要打包的目录:比如我在H: ...

2. vue项目中-上传图片头像并裁剪成任意大小的实现

   vue项目中-上传图片头像并裁剪成任意大小的实现 先看效果图: 放大缩小-翻转-查看都有的哦! 直接上代码 <el-dialog title="图片剪裁" :visible. ...

3. mac python3打包成窗体程序_使用pyinstaller将python程序打包成exe/苹果软件的方法与异常解决 - pytorch中文网...

   一.安装pyinstaller 通过清华镜像安装比较快 # 二者选其一执行,第二条快 pip3 installer pyinstaller # 清华镜像安装 # pip3 install -i htt ...

4. vue中使用moment处理时间戳转换成日期或时间格式

   vue中使用moment处理时间戳转换成日期或时间格式 npm i moment import moment from 'moment' <template><div>< ...

5. 用pyinstaller打包多个py文件转成exe格式

   用pyinstaller打包多个py文件转成exe格式 用pyinstaller打包多个py文件转成exe格式 响应国家号召2019-Ncov 在家闲来无聊,学写一个飞船攻打外星人的python程序, ...

6. t3财务系统访问服务器很慢,用友T3软件以前用的是WINDOWS自带的经典桌面，但换成其他桌面后发现远程接入软件使用时的访问速度明显变慢？-用友T3...

   文章摘要:用友T3软件以前用的是WINDOWS自带的经典桌面,但换成其他桌面后发现远程接入软件使用时的访问速度明显变慢?以前用的是WINDOWS自带的经典桌面,但换成其他桌面后发现远程接入软件使用时的 ...

7. exe打包工具_pyqt5快速上手基础篇12-使用Pyinstaller打包应用程序

   前言 本节我们学习如何使用Pyinstaller打包pyqt5应用程序,pyqt5的打包要比之前文章中讲述的tkinter的打包稍微复杂点,主要区别在于pyqt5打包需要导入Qt相关库,笔者开始打包时 ...

8. 《PyInstaller打包实战指南》第二节 PyInstaller的两种打包模式

   第二节 PyInstaller的两种打包模式 1. 文件夹模式打包 2. 单文件模式打包 3. build, dist和spec文件(夹)简介 PyInstaller可以把python程序打包成多个文 ...

9. Mac打包Android的apk,【ReactNative】Mac下分分钟打包 Android apk

   Mac 下 ReactNative如何打包构建Android apk 的应用.该文章还差一个 打包发布到各个平台的教程 总结 打包 jsbundle代码 生成签名 添加签名到app中 打包成apk(打 ...

10. webpack 打包html中css样式如果处理,webpack中单独打包css样式

    这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍 以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...

最新文章

1. linux终端传文件,如何使用Linux FTP命令传输文件
2. 最优化学习笔记（二十）——全局搜索算法
3. 神经网络不收敛的查缺补漏
4. 判断两个数组中是否存在相同的数字
5. apache多域名绑定手记
6. Promise 最完整介绍与实现解密
7. 【第一组】beta发行说明
8. BZOJ4303 : 数列
9. Django支付宝自动转账功能（一）
10. 解决datalist中单选按钮可以多选的问题（Asp.Net）
11. 数据结构试卷及答案（三）
12. 不用u盘安装linux真机,无需u盘和光盘安装linux
13. h3c交换机服务器无响应,华为（H3C）交换机版本升级遇到的问题总结
14. css超链接样式+雪碧图实现导航
15. 51单片机学习案例——自学使用
16. JAVA利用httpclient登录开心网
17. 【超详细】Windows平台安装 apache 2.4
18. 如何将照片格式转换jpg？
19. 在您所指定的角色服务器,指定 RD 会话主机服务器的远程桌面授权模式
20. 阿里云服务器通用型实例g5与g6区别及如何选择？

热门文章

1. 以数据为基，戴尔科技全线护航数字化“攀登者”
2. CentOS常用仓库
3. opencv求取图片各通道均值的两种函数方法
4. PS入门如何用PS制作材质替换效果
5. Windows API 教程（九） 网络编程
6. linux打印系统时间命令行,linux中多种查看系统时间的命令
7. UED专栏 | 携程机票订后服务“航班助手”的三大设计秘籍
8. 机器学习几种训练方式
9. 使用arcMap发布要素服务到使用的全流程记录
10. 企业网络安全策略综合设计与实现