electron-vue项目的创建
1. 在window上安装nodejs环境，node版本我使用的是12.18.2。 64位下载 32位下载
2. 设置npm源为淘宝镜像源
1 npm config set registry https://registry.npm.taobao.org 2 npm config get registry
3.全局安装yarn，查看yarn版本，设置yarn源为淘宝镜像源
1 npm install -g yarn 2 yarn --version 3 yarn config set registry https://registry.npm.taobao.org/ 4 yarn config get registry
可直接下载我的electron-vue-demo，以下内容可忽略。若需要打包linux-armv7l树莓派应用程序，查看安装说明
4. 安装vue-cli脚手架
1 npm install -g @vue/cli-init
5. 安装vue-electron模板（electron-vue-demo目录中不要带有中文）
1 vue init simulatedgreg/electron-vue electron-vue-demo
6. 项目中package.json中的electron版本是2.0.4版本，版本太低，我改成了9.2.1的版本
7. 在项目中新建.yarnrc文件，文件内容如下：
1 registry "https://registry.npm.taobao.org" 2 sass_binary_site "https://npm.taobao.org/mirrors/node-sass/" 3 phantomjs_cdnurl "http://cnpmjs.org/downloads" 4 electron_mirror "https://npm.taobao.org/mirrors/electron/" 5 sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/" 6 profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/" 7 chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedrive
8. cd到项目路径，安装依赖包
cd electron-vue-demo
yarn
9. 运行项目yarn dev后报错process is not defined，修改.electron-vue/webpack.renderer.config.js 和 .electron-vue/webpack.web.config.js。添加代码如下：
1 templateParameters(compilation, assets, options) { 2 return { 3 compilation: compilation, 4 webpack: compilation.getStats().toJson(), 5 webpackConfig: compilation.options, 6 htmlWebpackPlugin: { 7 files: assets, 8 options: options 9 }, 10 process, 11 }; 12 },
10. yarn dev后报错require is not defined，修改src/main/index.js文件。yarn dev运行成功后，开发环境已完成。
1 webPreferences: { 2 nodeIntegration: true 3 }
打包win32应用程序
1. 在package.json文件中配置win32打包。添加如下代码：
1 "build:win32": "node .electron-vue/build.js && electron-builder --platform=win32 --arch=ia32",
2. 执行yarn build:win32命令，打包成功后会生成一个build文件夹。
1 yarn build:win32
使用ubuntu打包linux-armv7l树莓派应用程序
1. win10上ubuntu的安装步骤自行搜索
2. ubuntu下安装nodejs环境，安装说明
3.在package.json文件中配置linux-armv7
author里的name、email、url必填，随意填写即可。
1 "author": { 2 "name": "tracetech", 3 "email": "123456789@qq.com", 4 "url": "http://www.tracetech.cn/" 5 },
scripts里添加一行代码
1 "build:linux": "node .electron-vue/build.js && electron-builder --linux --armv7l",
在build/icons文件夹中，设置软件图标，window使用.ico格式，linux使用png格式，图片分辨率不小于256*256
继续编辑package.json文件
1 "linux": { 2 "icon": "build/icons/icon.png", 3 "target": [ 4 "AppImage" 5 ] 6 }
4. 把项目拷贝到ubuntu系统中，我的项目路径是F:\testProject\electron-vue-demo，拷贝到utuntu的 /home/jianghy/ 目录中
1 scp -r /mnt/f/testProject/electron-vue-demo/ /home/jianghy/
5. 执行打包命令
1 sudo yarn build:linux
打包完成
