vue 打包桌面应用 并发布

版权声明:原创不易,多多珍惜 https://blog.csdn.net/wonaixiaoshenshen/article/details/88744534

vue 打包桌面应用程序

你说为啥现在前端这么累,一会做h5网页,一会pc网站,一会又是服务端渲染,一会又来一个桌面应用,一会又是App,是不是就差操作数据库了,不,不对,如果你是走的node 方向,那你就做到了,哈哈哈

  1. vue 打包这些流程我相信大家都已经知道了吧,不管你是vue cli 2 还是vue cli 3 打包出来都是有dist 文件的,至于前面的操作不懂的这些可以百度,多得很,我就直接给你们讲,如何打包桌面应用就好

Electronjs 是什么?

  1. Electronjs 这个就是一个很厉害的 js了,果然如传说一样 管你c++还是java,一把js 走天下,拿到需求就是干 对于这个 JS 不懂的可以去看看,这个的确很强大,里面功能很全,但是如果你只是要打包的话,不需要深入,只需要知道几个命令就好,下面贴上 地址,加代码

https://electronjs.org/ 官网介绍: 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用

  1. 进入文档,你就会发现,我去,有很多都不知道是什么操作,但是不用知道,你就知道是打包工具就好,用git 命令去拉取官网的这个代码,他这个代码也可以,但是如果你是vue 的同学,你想直接搞份demo 来修改就可以运行看到效果的,没问题,我后面会贴出GitHub地址,你直接下载去用,是不是很贴心,哈哈哈
# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
$ cd electron-quick-start

# 安装依赖并运行
$ npm install && npm start

这是官网的demo ,可以下载来运行
  1. 好了,我相信你肯定不愿意打包vue 之后再去复制到哪个js里面去修改地址,所以我接下来提供的方式是直接在 vue 项目中引入 然后打包,然后运行,然后发布,好了,首先,你得在你得vue项目中 用npm 或cnpm 的形式引入这2个命令
npm install electron --save-dev
 npm install electron-builder  --save-dev
 /* 
 *  这个代码的意思是引入这个打包的js 
 *  第二句的意思是进行打包命令
 */
  1. 然后就是重头戏了,接下来打开你的 package.json 文件 里面修改如下
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist/ IM --platform=win32 --arch=x64  --icon=./src/assets/yizhu.ico  --overwrite"

     electron_build 里面的  dist       位置代表存放位置, im部分代表exe 名字,可以修改, 
     --platform=win32 --arch=x64      代表的系统  如果是 32位的系统 就改32哈
     --icon=./src/assets/yizhu.ico    代表的exe文件 图标

如果你这些都已经配置好了,你就执行下面的命令就可以进行打包一个预览包了

npm run electron_build

  1. 如果出现这个了,恭喜了,vue打包桌面应用程序已经完成了,但是你这个要是想发给别人安装看,你这个还不行哟,还需要进行打包才能哟,推荐一个简单的

看完另一篇新博客有讲解 https://blog.csdn.net/wonaixiaoshenshen/article/details/89080861

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券