使用 electron-builder打包vue出现的问题

一、使用 electron-builder打包

1、在项目目录下执行 vue add electron-builder 命令，安装electron-builder插件，安装完成后，查看 package.json文件，在src 目录下也会多出一个 background.js文件。

 

2、执行npm run electron:serve 启动服务 ，启动成功则代表插件安装成功。

3、执行 npm run electron:build 打包项目。此处可能会因为网络超时而导致报错，建议使用cnpm进行下载或到官方github手动下载后解压放到C:\Users\Administrator\AppData\Local\electron\Cache中后，重新进行打包。

4、以上步骤完成，在项目根目录下会生成一个 dist_electron 文件夹.里面包含客户端安装文件（Setup）及未压缩的安装包（里面包含可直接运行的客户端exe文件）

5.针对 electron-builer 打包的配置问题 ，在项目根目录下新建 vue.config.js 文件，如下图：

 详细的配置可看：

https://www.electron.build/configuration/configuration

注意 ：electron-builder 打包的项目上线后会出现 跨域问题。可通过 在background.js 中 配置解决，如下图：

 （注：第5点因本人未尝试或遇到跨域问题，直接使用原博主的截图与描述，侵删）

二、出现的问题

1、electron-v13.6.9-win32-x64.zip下载失败

按照错误提示，是 electron-v13.6.9-win32-x64.zip这个文件下载失败，可以利用报错信息中的https://github.com/electron/electron/releases/download/v13.6.9/electron-v13.6.9-win32-x64.zip这个地址进行下载，或者到GitHub上下载，下载后找到以下位置，将压缩包解压到electron的cache文件夹中。

2、nsis-resources下载失败

按照错误提示，是 nsis-resources-3.4.1下载失败，到 https://github.com/electron-userland/electron-builder-binaries/releases中选择所需的版本进行下载，此处我选择的是zip后缀的文件。

 下载后找到以下位置，

 将解压的文件中的nsis-resources文件复制到以上位置的nsis目录中

 3、无法识别中文

 

出现这个问题的原因是路径中包含中文，为了让electron-builder能识别中文，我们需要去修改项目文件中node_modules\.store\app-builder-lib@22.14.13\node_modules\app-builder-lib\out\targets\nsis\NsisTarget.js的executeMakensis方法，加入以下代码：

args.push("-INPUTCHARSET", "UTF8"); 

 

 至此，我的项目就打包成功了，打包成功后目录如下：

 具体打包过程可参考vue 项目打包客户端（简单用法） electron-builder ，nodewebkit_vue electron-builder_4258的博客-CSDN博客方法一. 使用 nodewebkit 进行打包1. 下载 nodewebkit ，官网下载即可 2.下载完成，将压缩包解压为文件夹 ，例子：下图3.新建文件夹，其中需要有两个文件，package.json 文件和index.html 文件4.将这两个文件打包为.zip格式的压缩包，然后修改压缩包后缀名为.nw。5.将 步骤4生成的.nw文件复制到 步骤二的nw文件夹中6. 从nw文件夹进入cmd， 执行命令 copy /b nw.....https://blog.csdn.net/weixin_47694910/article/details/124603293

解决问题参考

解决electron打包下载依赖超时，报错等问题 - 简书一、vue项目引入electron-builder 这里相当于前言 使用vue-cli构建electron应用，使用vue add electron-builder，添加打包...http://events.jianshu.io/p/35abb68d0331