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
打包完成
