Electron 應用技術體系推薦

目錄結構

demo（專案名稱）

├─ .electron-vue（webpack配置檔案）

│  └─ build.js（生產環境構建程式碼）

|  └─ dev-client.js（熱載入相關）

│  └─ dev-runner.js（開發環境啟動入口）

│  └─ webpack.main.config.js（主程式配置檔案）

│  └─ webpack.renderer.config.js（渲染程式配置檔案）

│  └─ webpack.web.config.js

├─ build（是檔案打包使用的）

│  └─ win-unpacked/

│  │  ├─ locales（地區語言資源包）
 

│  │  ├─ resources（地區語言資源包）

│  │  ├─ *.dll（動態連結庫）

├─ dist(打包後的檔案資源)

│  ├─ electron

|  ├─ web

├─ node_modules/（依賴目錄）

├─ src（原始碼）

│  ├─ main(主程式)

│  │  └─ index.dev.js（捆綁index.js）

│  │  └─ index.js(主程式的程式JS)

│  ├─ renderer（渲染程式）

│  │  ├─ assets/（放置靜態資源，如圖片，視訊，靜態配置）

│  │  ├─ components/（放置vue頁面）

│  │  ├─ router/（放置頁面路由）
 

│  │  ├─ store/（放置公共模組，如vuex）

│  │  ├─ App.vue

│  │  └─ main.js

│  └─ index.ejs

├─ static/（靜態檔案）

├─ test

│  ├─ e2e

│  │  ├─ specs/

│  │  ├─ index.js

│  │  └─ utils.js

│  ├─ unit

│  │  ├─ specs/

│  │  ├─ index.js

│  │  └─ karma.config.js

│  └─ .eslintrc#全域性配置檔案

├─ .babelrc

├─ .eslintignore

├─ .eslintrc.js
 

├─ .gitignore

├─ package.json

└─ README.md

環境搭建

預設有 node 環境.

1. 先安裝 electron vue vue-cli，因為electron-vue 中有內建 webpack ，無需再裝一個獨立的webpack。

   npm install -g electron
   
   npm install -g vue
   
   npm install -g vue-cli
   
   

2. 建立一個空資料夾，DOS命令視窗進入該資料夾位置，初始化一個 electron-vue 專案。

   //使用vue-cli來安裝electron-vue的模板
   
   vue init simulatedgreg/electron-vue demo
   
   

   注：demo 是專案名稱

3. 安裝依賴

   npm install
   
   

4. 啟動專案（開發環境）

   npm run dev
   
   

5. 完成1~3步驟，一個基於 vue 的 electron 專案就初始化完成了。

   啟動專案後效果圖如下：
   
   

問題解決

初始化報錯

當執行 npm init simulatedgreg/electron-vue demo 命令初始化專案時報錯，大致意思說找不到 electron-vue 或者安裝 create-electron-vue 等原因導致失敗，可以選擇重新執行命令多試幾次，或者先下載electron-vue原始碼，然後生成自己的專案模板。下面說後者的步驟。

1. electron-vue 下載

2. cmd 切換到該專案根目錄

3. 初始化一個自己的專案。初始化完之後可以再命令對應的“目錄路徑”看到你的專案

   vue init 專案路徑 專案名
   
   

4. 完成

啟動專案報錯

若第一次啟動專案報錯如下：

![](https://img2020.cnblogs.com/blog/2076507/202007/2076507-20200720143237570-1553961959.png

大概意思是 提示 src/index.ejs 中沒有定義 process 。

原因分析：大概是 html-webpack-plugin 外掛處理該ejs檔案時，沒有讀到該外掛對應有 process 屬性，應該是去配置檔案 "./electron-vue/webpack.render.config.js" 檔案中讀取 HtmlWebpackPlugin 外掛的 process 屬性，而 "./electron-vue/webpack.render.config.js" 並未定義該屬性，固報此錯。

index.ejs 原始碼：

配置檔案中外掛配置程式碼：

解決方法一（推薦）：

把index.ejs檔案中的 <% if (!process.browser) { %> 改成

<% if (!htmlWebpackPlugin.options.process.browser) { %> ，

改完後程式碼：

index.ejs:

./electron-vue/webpack.render.config.js：

解決方法二：直接刪除下圖中紅框框住部分，沒有什麼影響：

解決方法三：將node 12.x版本還原到10.16的穩定版即可。

註釋：技術推薦Electron 應用技術體系推薦引用他人的electron-vue專案講解的視訊截圖，找不到連結了就不寫上了。