electron-vue--项目打包及打包过程中遇到的问题

一.打包流程

1.在package.json中的script中添加

      "dist": " electron-builder --win --x64"

如图：

234.png

2.先执行npm run pack

3.在执行npm run dist 即可

此时在buil文件夹中即可看到exe,点击安装就行

34.png

二.打包遇到的问题--（如果是按照上面的打包方法去做，则不会遇到这一部分的问题，都是我走过的弯路。。。。。。。。。）

1.首先是执行npm run build报错

• 报错build.js中tasks
  我把build.js中第一第二个tasks改为tasks1后，在执行npm run build，不报错tasks了，又报错其他问题，一直到最后也没解决，百度了一下，有说是node 版本过低的，所以就去升级node版本（现在用的是node版本为12.2.0）

2.升级node版本后报错

11.png

33.png

这个报错原因是node版本过高，和node_scss版本不匹配，结果就是我又去升级了node_scss版本

3.可以正常启动，但是启动过程中会有报错，页面上显示的内容是项目目录，而不是正常的页面，报错Error: Node Sass version 6.0.0 is incompatible with ^4.0.0.

原因：node_scss版本过高。。。。。。。。。。。。。！！！和electron-vue中的node_scss不兼容

后面又把node和node_scss版本回退到12.2.0和4.9.2的，项目启动后页面恢复正常

4.然后又百度了网上的各种打包方法，都试了，最后只有下载

  npm install electron-builder -save-dev

靠谱一些，然后执行npm run build, npm run dist

但是，凡是就怕但是，打包后的exe打开是白屏，只有在本地项目运行的时候，exe打开才有东西。。。。。。。。。。

最后只好把package.json的内容都恢复成新建项目时的package.json，然后再script中只添加 "dist": " electron-builder --win --x64"，然后再执行打包命令（具体的步骤看本文打包方法一）

5.打包的exe打开是白屏，只有本地项目运行时页面才正常显示的原因：

,
执行npm run pack
执行npm run dist
这样打包的exe安装后，打开才是正常的页面