electron闭坑指南
近日，应公司需求，开发了一个基于electron框架的桌面应用，将移动端进行套壳，变成桌面应用
- 为什么写的，因为这几天，真的被网上的文档给快折磨死了，各种无厘头，版本不对，年代久远，莫名其妙报错，等等，所以准备写一篇完整的文章，供大家参考，也供自己复习，好了，废话不多说，开始我们的学习
首先我们理一下思路，如何从零开始完成一个app的套壳桌面端：
- 首先，我们要搭建electron环境，这里面的坑很多，之后慢慢讲
- 其次，搭建electron项目，这里推荐使用electron-vue，但是使用前先看好electron文档，不然一脸懵逼
- 然后进行页面开发，做出达到效果的，这里面涉及到很多electron特定的属性（正常学习即可）
- 然后下载打包工具，运行打包，第一次运行一定要用cnpm，不然你会无限失败（这一步，我花了一下午）
- 然后nsis进行二次打包，编写自定义安装程序（根据文章一步一步来不难），
- 然后用electron-update进行升级功能的编写（坑超级无敌多）
- 最后配置服务器文件，基础功能完成，开始优化
第一步：安装Node,VUE脚手架，创建electron-vue
//先去网上下载10.0.0以上的node版本，然后安装vue脚手架
install @vue/cli -g
//然后用vue创建electron项目，
vue init simulatedgreg/electron-vue electron-vue-start(你所创建的文件名)
//关键！！！！！！！！！！！！！！！！！！！！！！！！
//先去page.json里面修改electron版本！！不能默认的^2.xx,一定要调到^4.xx,不然后续更新会把你坑死，
//然后yarn安装依赖，推荐用yarn，npm容易卡，cnpm容易错误
//然后启动，此时会报错，提示
解决办法如下： 修改 .electron-vue/webpack.renderer.config.js 和 webpack.web.config.js如下：
//webpack.web.config.js：
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: false
})
//webpack.render.config.js
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
nodeModules: process.env.NODE_ENV !== 'production'
? path.resolve(__dirname, '../node_modules')
: false
}),
然后你再跑，就能运行成功了，指令是npm run dev
第二步：编写electron程序，
- 首先进入package.json，找到自己项目的入口文件，在这编写项目的主进程，子进程要使用主进程中的属性一定要用remote，这里面都是基础语法，没啥坑，我们进入下一步
第三步：打包！
- 这里一定要说！！！！第一次打包一定要运行cnpm或者yarn，因为他要装好几个依赖，而且奇慢无比，淘宝镜像不管用，npm不知道死多少次了，
- 打包配置：
- 打包成功以后，在自己项目里的build文件夹内可以看到如下，exe是安装程序，打包完成的，win-ia32里面exe是还未打包的程序，如果要进行安装配置，自定义安装程序，需要用里面的来二次打包
第四步：跟新
- 首先需要安装electron-updater依赖：npm install electron-updater --save
- 然后再package.json中的build配置public，这样执行npm run build时候，会在build目录中生成latest.yml文件，这个用来验证应用是否被攥改，和应用版本的，然后根据网上的安装文档，就可以实现了，这里最坑的，就是版本问题了，你的electron版本呢一定要4.0.1以上，不然一定失败！！！！
