vue +electron项目安装，打包报错集

---

一、vue给对象添加新的属性赋值不能及时监测到时使用this.$set()属性

• 看到obj对象中成功添加了属性b,值为‘obj.b’ 但是，并没有同步渲染到页面上,这是因为Vue最初实例化的时候，Obj中没有属性b，故而如果用this.obj.b添加属性的话Vue不会把他作为响应式监听。

• 所以应该要使用this.$set(‘对象名’,要修改的属性名,属性值),这样新添加的属性值会被Vue监听到并且同步渲染到页面上

代码如下（示例）：

   <div id="app">
      <ul>
        <li v-for="item in obj">
          {{ item }}
        </li>
      </ul>
      <button @click = addObj>添加Obj</button>
    </div>

   var vm = new Vue({
      el: "#app",
      data: {
        obj: {
          a: "obj.a"
        }
      },
      methods: {
          addObj() {
            this.obj.b = 'obj.b'
            //this.$set(this.obj, 'b' ,'obj.b')
              console.log(this.obj)
          }
      }
    });

二、安装报错

1.处理npm i 因版本问题导致的报错（legacy-peer-deps）

本地的npm版本过高导致在npm i 的时候报错

解决方法:
运行命令

npm install --legacy-peer-deps

npm install --legacy-peer-deps 之后还报错的话可以把本地项目的 package-lock.json 删除掉重新执行该命令。
package-lock.json 文件主要作用就是锁定安装包的版本号，以确保项目其他成员在 npm install 时大家的依赖一致。
将本地的 npm 版本降级 npx -p npm@6 npm i --legacy-peer-deps。

三、运行报错

1.查看项目所需的node环境与电脑环境变量里配置的是否一致

本地电脑更改项目node使用版本切换
1.下载需要的node安装包安装到本地。
2.配置系统环境变量：

3.打开cmd运行命令（切了版本之后 执行一下这两个 定义一下位置）

npm config set prefix “D:\node-v16.20.0-win-x64”

npm config set cache “D:\node-v16.20.0-win-x64\npm-cache”

4.完成后运行node -v查看本地使用的node版本是否一致
提示：这里也可以使用包管理

2.查看项目所需的node环境与电脑环境变量里配置的是否一致

1.在cmd控制台查看node版本，以及使用位数

//命令行输入node回车后输入
require("os").arch()

2.运行软件打开控制台查看软件运行使用node版本

直接在控制台输入process后回车，就会出现对应的参数信息

3.部分node版本软件使用第三方库时报错（基于electron+vue)

1.如果调用有c++，还报错node is not a valid Win32 application.，尝试运行下

原理：ffi-napi必须使用32位。因为32位的dll能兼容64位系统的电脑，64位的dll不能兼容32位电脑

// 直接进入对应的node_modules目录，重新编译，关键是指定32位架构。
node-gyp clean configure build --verbose --arch=ia32
// 同样需要指定32位架构，命令如下：
node-gyp build --arch=ia32

2. 如果报错gyp ERR!

npm instal --unsafe-perm
或者
yarn --unsafe-perm

四、项目运行数据请求失败，没有加载到最新数据

1.刷新本地的DNS缓存

方法1.用“WIN +Ｒ”快捷键打开运行窗口，输入“ｃｍｄ”命令，进行命令行窗口，输入命令ipconfig /flushdns
方法2.勾选后shift+f5强制刷新

方法3.重置winsock目录，在命令提示符中输入netsh winsock reset，然后回车。重置成功后要重启电脑。这个命令非常好用。

五、electron项目打包为asar后部分部分依赖模块找不到

原因分析：

Electron 应用中的前端代码最终会打包成 asar 文件，那什么是 asar 文件呢？

1.asar 的定义：asar 是一种文件归档方式，类似于 tar 包，把多个目录和文件合并在一起，但是并不进行压缩
本质上讲，asar 是一个虚拟目录，以一个大文件文件形式保存了指定目录下所有文件的方式。

2.为什么要用 asar 文件主要有三点原因：

• 避免 Windows 系统下文件路径过长（Windows 限制最长路径为 260 个字符）
• 加快 require 函数的加载文件的速度
• 避免向用户直接暴露代码文件

3.站在操作系统视角来看，asar 是一个文件而并非目录，因此 node.js 自带的 fs 模块是无法把 asar 当做虚拟目录来使用的
不过 Electron 重写了 fs、require、process、child_process 等模块的方法，支持识别 asar 内部的文件，所以上面的代码在 Electron 主进程中是可以正确运行的

因此，通过 require 和 fs 引用 asar 路径，都会执行 Electron 提供的内部实现，而不是 Node.js 原有的实现，如果想获取 asar 文件自身的相关信息，例如计算 checksum 的话，就必须要引用 original-fs 模块

解决方案：

提示：这里填写该问题的具体解决方案：

例如：electron中引入7zip-min和adm-zip依赖
在ele-win目录下引入报错，找不到7zip-min，adm-zip模块

 const _7z = require('7zip-min')
 const AdmZip = window.require('adm-zip')

7zip-min调用node的一些原生模块，列如增加了electron original-fs模块的写入，即使将它安装在electron层下，打包后依旧会报错找不到模块。
这个时候就需要将该依赖包的依赖从asar中提取出来才能够获取到

可设置

--ignore=7z --extra-resource=7z

• ignore ，在将默认打包的范围内，排除掉一些不打包进去的。例如第三方资源文件，是无论如何，都不能打包到asar里面的。打包进去的话，或者没有用，占体积。或者影响程序逻辑实现，不能访问到这些第三方资源。
• extra-resource，可以将第三方资源，在打包的时候，复制到app.asar的同级目录。
  这两个参数的组合效果就是：把第三方资源文件，提升一个目录层级，从app.asar的内部，提升到app.asar的同级
• 如果仅仅设置extra-resource，而不设置ignore的话，app.asar里面就会有一份多余的resource文件

• 方法二

# 不打包 .node 文件
$ asar pack app app.asar --unpack *.node
# 不打包 .node 和 .out 文件
$ asar pack test test.asar --unpack "{*.node,*.out}"

把 node_modules 里面的可执行文件放到了 node_modules.asar.unpacked 里面

六、查看asar包内容的调试工具

asar-explorer

七、在mac端打包运行

1、基于项目中的ele-win复制一个改为ele-mac

2、在有Mac版的项目中复制以下文件在ele-mac中

（1）background.png是安装时候的背景图
3、将appBuild.js和appdmp.json文件的项目名称改成自己的项目名称，以及在appBuild.js中可以设置版权信息
（1）更改公证信息及项目名称等，appId有就改，没有使用其它项目的也可以


（2）主进程使用的静态资源打进程序

4、定义全局变量判断系统平台

4、如果项目中使用了imageMagick SDK
（1）将Mac版的SDK替换原来windows的，命令行一样
（2）将child_process的exec改为spawn进程
5、如果运行不了，删除imageMagick文件夹下lib下的libiconv.2.dylib（基本Mac版的项目已经删除）
6、打包需要安装的依赖

打包后主进程使用的静态资源导致签名失效问题，将scripts下的两个plist文件改成如下（基本使用到magick的Mac已经改好）

Mac上传系统弹窗不能选择文件问题

如果用了第三方库调用dylip库打包后有报错

在ele的koffi依赖这个路径下手动签下名

codesign --force --timestamp=none --options runtime --sign “Developer ID Application: yun li (7VC3687H26)” ./koffi.node
然后再打包

---