Vue-Cli4.x项目通过electron打包桌面应用程序
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue-Cli4.x项目通过electron打包桌面应用程序，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2425字，纯文字阅读大概需要4分钟。
内容图文
发现网上的教程大部分都是vue2.x目录结构不太一样
还有就是将一些问题整合在一起
傻瓜式教程
步骤一
下载electron的demo项目
electorn GitHub
下载demo electron-quick-start
步骤二
运行demo项目
用你的ide打开demo项目 在项目根目录下
npm install
npm start
注意是根目录
执行成功界面
步骤三
在原vue项目里安装相关依赖
其中electron-packager是打成exe文件的插件
npm install electron --save-dev
npm install electron-packager --save-dev
根目录下的vue.config.js文件
在项目根目录下新建 preload.js，内容可以为空
主要用来在创建桌面窗口前定义一些window全局变量。可根据项目自行定义。如：window.isElectron = true
在项目中进行判断是否为桌面程序打开，可以调用electron的一些api
将步骤二中的main.js拷贝到项目根目录下，并更名为electron.js
更新electron.js文件里的路径为vue项目生成的静态资源文件index.html
vue项目package.json文件中增加一条指令
"electron_dev": "npm run build && electron electron.js"
执行npm run build 生成dist目录
执行npm run electron_dev 启动 electron
即可看到生成的应用程序 但是我失败了hahah
但是这不重要 并不影响我继续做下去
步骤四
打包exe文件
npm run electron_dev 失败了没关系 直接打包成exe文件执行
复制electron.js、preload.js到dist目录中，并注意修改路径
复制demo例子中的package.json到dist目录中,注意修改路径
在项目的package.json中（注意不是dist下的package.json）为之前下载好的electron-packager，增加一条启动命令
"electron_build": "electron-packager ./dist untilCloud-07 --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"
electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]
-
sourcedir: 资源(dist/package.json)路径，在本例中既是./dist/ -
appname: 打包出的exe名称 -
platform:平台名称（windows是win32） -
arch: 版本，本例为x64
执行npm run electron_build，可以看到项目目录中多了一个untilCloud-07-win32-x64文件，找到里面的untilCloud-07.exe运行即可
问题集锦
请求不到服务器
问题描述：因为是前端项目，很可能会有跨域，但是设置了跨域会导致请求不正确访问不到服务器
解决方案：去除跨域，用绝对路径
页面跳转异常、背景图片未成功加载、页面空白
问题描述：能请求服务器但是发现会有页面跳转异常、背景图片未成功加载、有的页面空白
如果router/index.js中配置的默认模式是history,那么打包后就可能会发生以上异常
解决方案：删除mode或者把mode改成hash。
如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。
写在最后
打包过程基本来自此链接
使用electron 将web页面(vue-cli)打包为桌面应用
问题二的解决方案来自此链接
vue+electron打包后页面空白
内容总结
以上是互联网集市为您收集整理的Vue-Cli4.x项目通过electron打包桌面应用程序全部内容，希望文章能够帮你解决Vue-Cli4.x项目通过electron打包桌面应用程序所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。