Vuecli4+electron實現客戶端開發實現
前言：
electron是基於chromium和node.js，可以實現html/css/javascript構建跨平臺應用的技術架構，可以兼容windows和linux、mac。
創建項目：
1、安裝cnpm工具
使用cnpm加速下載，在cmd管理員賬號下執行以下指令
指令:npm install -g cnpm --registry=https://registry.npm.taobao.org
後邊使用的指令儘量使用cnpm
- 升級vue-cli
先查看本地vue-cli
指令:vue -V
卸載指令:cnpm uninstall vue-cli -g
安裝指令:cnpm install @vue/cli -g
- 創建vue項目
指令:vue create electron-demo
根據提示進行選擇，路由儘量不使用history模式
- 安裝electron支持
指令：vue add electron-builder
在安裝過程中使用最新版本
安裝完成系統文件中存在以下改變，會將需要依賴的包生成到package.json，以及生成對應的指令信息等。
在src中生成background.js文件，electron支持文件的入口在這個文件中
在項目執行完成需要進行background.js修改
app.on('ready', async () => {
//此處顯示的devtools，加載會很慢，直接註釋掉
/*if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS_DEVTOOLS);
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString());
}
}*/
createWindow();
});
win = new BrowserWindow({
show: false,
webPreferences: {
nodeIntegration: true,//使用nodejs模塊
webSecurity: false,//設置跨域設置
enableRemoteModule: true//允許調用遠程模塊
}
});
win.maximize();//設置窗口最大化
win.show();//設置窗口顯示
- 編譯並啓動APP
指令：cnpm run electron:serve
- 打包app
指令：cnpm run electron:build
Electron中使用的協議不同與vuecli自身定義的，所有使用axios的請求都要採用全路徑進行後臺訪問。
具體實現方式：在封裝好的request.js中將url進行重新設置定義，在使用編譯的情況下，路徑訪問可以根據vue.config.js中的代理進行處理，在打好包的文件中這種代理是無法使用。
- 針對項目其他修改圖標名稱等
可以根據electron官網提供的文檔進行處理