1,【electron+vue】 构建桌面应用——创建electron项目(包括创建,运行,打包碰到的问题)

1,首先你得有一个vue-cli 创建的vue项目.我们在vue项目的基础上添加一下插件.就变成了electron项目.如何创建vue项目我这里就不过多赘述了,网上有很多.
2, 添加插件.
1.在项目根目录下运行命令: vue add electron-builder
2,选择最新版本,现在最新版本是13.0.0

问题1: 如果碰到了npm下载vue add electron-builder失败,那就用淘宝镜像去下载cnpm i electron

3.在窗口运行
cnpm run electron:serve

运行成功就会弹出一个窗口,如上图所示.

4,打包
cnpm run electron:build
问题2: 如果打包失败,右键打开项目所在目录,将含有中文的文件夹名改成英文的就可以了,如下图所示


打包完成后你会发现有两个.exe文件
第一个是免安装的,直接双击运行就可以,但是需要依赖和它同级的文件
第二个是要安装的,不需要依赖其他文件.可以单独使用.
问题3: 如果打开白屏,找到router,mode的模式改为hash就可以了

const router = new VueRouter({
  routes,
  mode:'hash'
})

然后重新打包就可以了.

到这里就完成了创建,运行,打包这三步.下篇文章咱们讲讲electron一些常用的基本功能