vue 打包桌面应用 并发布

版权声明：原创不易，多多珍惜 https://cloud.tencent.com/developer/article/1454216

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://cloud.tencent.com/developer/article/1454561