electron-vue 安装步骤-以及electron:build报错问题-vue 桌面应用

1. 第一步：首先确保已安装vue最新脚手架 @vue.cli

   没安装可通过以下命令安装

   cnpm i @vue/cli -g
   

2. 安装 @vue/cli-init

   通过以下命令安装

   cnpm i -g @vue/cli-init
   

3. 执行命令创建 electron-vue 项目 my-init-electron 为项目名

   vue init simulatedgreg/electron-vue my-init-electron
   

4. 至此就是一个 electron-vue 的项目 可以使用cnpm i 下载依赖；然后根据 package.json 中的 ‘scripts’ 命令启动项目或打包

5. 中文文档：

   1. https://simulatedgreg.gitbooks.io/electron-vue/content/cn/using-electron-builder.htm

6. 配置自动更换

    "publish": [
         {
           "provider": "generic",
           "url": "http://下载地址"
         }
       ]
   

在已有的vue项目中构建

不得不说 electron 实在太脆弱了-动不动就打包报错

第二种方法就是在已有的vue中集成 electron

1. 首先要有一个创建好的vue项目

2. 执行命令

   vue add electron-builder
   

   然后就会在项目中自动安装 electron

   在package.js文件中会看到新增了一些命令

   npm run electron:build 打包命令

   npm run electron:serve 启动命令

3. 注意事项

   1. 一般来讲，在网络ok的情况下( 可以访问国外的资源 )，是可以直接打包完成的，并且会在目录中生成 dist_electron 目录，其中进入后就可以看到一个exe后缀名的文件，便是安装包，双击就能自动安装，还可在桌面创建图标

   2. 网络不好的情况下会出现报错，原因就是需要的一些包下载不到，解决方案就是手动下载这些包，然后放到指定目录，在知道不报红，就可打包成功 (报红不影响应用的打包和服务启动，只是打包后不会生成安装包)

   3. 常见错误：

      报错时看报文中包含一下某个包名，一一对应就行，包可能一样但是版本一定要注意

下载资源：npm.taobao.org/mirrors/ele…

备注：在上面的地址中，找到对应版本，下载如下两个文件：electron-v2.0.18-win32-x64.zip和SHASUMS256.txt

安装位置：C:\Users\windows用户\AppData\Local\electron\Cache，并将.txt文件名加上版本号：electron-v2.0.18-win32-x64.zip和SHASUMS256.txt-1.8.2

1.1在复制一份放在C:\Users\WJ\ .electron

2.winCodeSign-2.4.0

下载资源：github.com/electron-us… 在里面找到winCodeSign-2.4.0

安装位置：在目录C:\Users\windows用户\AppData\Local\electron-builder\cache\winCodeSign\winCodeSign-2.4.0（没有该文件就新建，后面都是这样）下，将解压的文件直接放入这个目录下，将下载文件解压到此文件夹内

3.nsis-3.0.3.2.7z

下载资源：github.com/electron-us… 在里面找到nsis-3.0.3.2.7z

安装位置：在目录C:\Users\windows用户\AppData\Local\electron-builder\cache\nsis下，将解压的文件直接放入这个目录下，将下载文件解压到此文件夹内

3.nsis-resources-3.3.0

下载资源：github.com/electron-us… 在里面找到nsis-resources-3.3.0.7z

安装位置：在目录C:\Users\windows用户\AppData\Local\electron-builder\cache\nsis下，将解压的文件直接放入这个目录下，将下载文件解压到此文件夹内(和上面)

ws用户\AppData\Local\electron-builder\cache\nsis下，将解压的文件直接放入这个目录下，将下载文件解压到此文件夹内(和上面)

[外链图片转存中…(img-I7gKSRMm-1624957879146)]

重新build应该可以成功了