從零開始的electron開發-項目搭建

時間 2021-03-03

標籤 html 前端 vue node linux webpack git github web vue-cli 欄目 HTML 简体版

原文原文鏈接

本文搭建基於vue cli提供的vue-cli-plugin-electron-builder進行腳手架搭建。html

electron的優勢和缺點已經有各類分析了，這裏再也不多述，若是你是一個前端開發，想把現有頁面轉化成桌面軟件，而且能有win，mac，linux的版本，那麼electron不失爲一個好的選擇，固然一個多端的框架優缺點都是很明顯的，既然想快速開發那麼就得捨棄點東西，好比體積大小，性能等等。前端

開發前的準備

說到底electron本質上就是一個基於Chromium的應用，通俗點說，這個桌面軟件就是一個瀏覽器，咱們寫的東西在瀏覽器中展現，是否是一會兒就回到熟悉領域了，那麼在開發前你得知道前端三駕馬車 HTML, CSS 和 JavaScript，涉及到一些文件等的處理的話那麼會有些許node的知識。vue

安裝

npm install -g @vue/cli
vue create electron-vue
# 自行選擇vue版本，因爲electron使用的是Chromium，那麼咱們能夠沒必要考慮兼容性的問題，我這裏直接選擇vue3（看我的喜愛）
cd electron-vue
vue add electron-builder
# 選擇electron版本號，這裏我選擇的是`11.0.0`
# 安裝完成以後會有`src/background.js`文件，`package.json`中會多出幾條electron的build及serve命令
npm run electron:serve
# 稍等一下子（Vue Devtools首次安裝問題）會有一個桌面窗口出現，ok安裝就完成啦，接下來咱們對其進行改造。

說明

改造前說明一下：electron開發和咱們普通的開發有所不一樣，它是有兩種進程的：主進程和渲染進程node

主進程src/background.js：管理全部渲染進程（怎麼配置桌面軟件，怎麼打開桌面軟件，怎麼相互通訊等等）。
渲染進程：說得直白點就是網頁（就是打開咱們單頁的網頁）

npm run electron:serve作了什麼，其實就是相似先運行npm run serve啓動一個網頁的端口並生成一個實時打包的js，而後經過electron的命令指定啓動的js，用主進程載入網頁的端口。
通俗點來講，你能夠理解爲咱們開發的桌面軟件是一個瀏覽器，主進程就是設置這個瀏覽器的樣式（圖標，大小等等），渲染進程就是瀏覽器打開的網頁。linux

改造

src目錄改造

首先咱們在src目錄下新建兩個文件夾src/main、src/renderer，這兩個分別放主進程及渲染進程的文件，而後把src/background.js放入src/main中，而後重命名爲index.js，src下其餘文件放入src/renderer中。
如今的結構以下：webpack

├─src                          # 源碼目錄
│  ├─main                      # 主進程目錄
│  │  └─index.js               # 主進程入口
│  └─renderer                  # 渲染進程文件夾
│      ├─assets
│      ├─components
│      ├─App.vue
│      └─main.js                # 渲染進程入口

添加vue.config.js

因爲咱們修改了默認的入口文件位置，咱們應該配置對應的參數，
在根目錄新建vue.config.js，添加git

module.exports = {
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: 'src/main/index.js', // 主進程入口文件
      rendererProcessFile: 'src/renderer/main.js', // 渲染進程入口文件
      mainProcessWatch: ['src/main'], // 檢測主進程文件在更改時將從新編譯主進程並從新啓動
    }
  }
}

而後從新npm run electron:serve，看可否從新啓動。 github

補充：若是是隻打包單頁electron的話這樣配置沒問題，可是這樣的話想對web頁面打包(npm run build)會有問題，由於咱們把入口文件位置修改了。
這裏咱們能夠經過設置pages來修改其入口文件，而且這樣還能夠打包多頁web

module.exports = {
   pages: {
    index: {
      entry: 'src/renderer/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'vue-cli-electron',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // loader: 'src/loader/main.js' // 多頁loader頁
  },
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: 'src/main/index.js', // 主進程入口文件
      mainProcessWatch: ['src/main'], // 檢測主進程文件在更改時將從新編譯主進程並從新啓動
    }
  }
}

注：若是添加了pages，請把electronBuilder裏的rendererProcessFile刪除，兩個都是web頁面的入口，是互斥的。
嘗試分別運行web的serve、build及electron的serve、build，看是否能成功運行(打包可能會由於網絡緣由，下載electron包失敗，若是未添加.npmrc請參考結尾補充)。vue-cli

環境變量配置

vue cli能夠經過--mode xx來讀取.env.xx設置環境變量參考，在根目錄新建

.env  # 本地開發
.env.dev  # 打包dev
.env.test  # 打包test
.env.prod  # 打包prod

.env:
NODE_ENV=development
VUE_APP_ENV=development
VUE_APP_APPID=com.electron.electronVueDEV
VUE_APP_PRODUCTNAME=electron開發
VUE_APP_VERSION=0.0.1
BASE_URL=/

注：.env 的NODE_ENV設置development，其他打包的請設置production
NODE_ENV: webpack運行的模式
VUE_APP_ENV：咱們本身使用的環境變量(經過這個判斷咱們是什麼環境)，好比.env.test爲VUE_APP_ENV=test，.env.prod爲VUE_APP_ENV=production
VUE_APP_APPID：electron的appId配置，com.electron.electronVueDEV，com.electron.electronVueTEST，com.electron.electronVue
VUE_APP_PRODUCTNAME：electron的productName配置，electron開發，electron測試，···
VUE_APP_VERSION：electron的version配置

修改package.json的scripts，刪除原來的打包命令，新增：

web的打包：
"build:dev": "vue-cli-service build --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode prod",

electron的打包：
"build:dev:win32": "vue-cli-service electron:build --mode dev --win --ia32",
"build:dev:win64": "vue-cli-service electron:build --mode dev --win --x64",
"build:test:win32": "vue-cli-service electron:build --mode test --win --ia32",
"build:test:win64": "vue-cli-service electron:build --mode test --win --x64",
"build:prod:win32": "vue-cli-service electron:build --mode prod --win --ia32",
"build:prod:win64": "vue-cli-service electron:build --mode prod --win --x64",
"build:dev:mac": "vue-cli-service electron:build --mode dev --mac",
"build:test:mac": "vue-cli-service electron:build --mode test --mac",
"build:prod:mac": "vue-cli-service electron:build --mode prod --mac",

electron打包這裏只配置了win32，win64，mac的打包，若是對其餘模式的包有需求的請參考連接自行配置。

環境變量檢測及打包配置

添加config配置

新增renderer/config/index.js，

const env = process.env

const config = {
  host: '',
  baseUrl: ''
}

Object.assign(config, env)

// if (env.NODE_ENV === 'development') {
//   config.VUE_APP_ENV = 'test'
// }

if (config.VUE_APP_ENV === 'development') {
  config.host = 'http://192.168.148.174:8080'
} else if (config.VUE_APP_ENV === 'test') {
  config.host = 'http://192.168.148.175:8080'
} else if (config.VUE_APP_ENV === 'production') {
  config.host = 'http://192.168.148.176:8080'
}

export default config

本地開發切換環境，可使用上面註釋的方法修改，也能夠直接修改.env文件的VUE_APP_ENV。

打包配置

src/renderer/App.vue添加import cfg from '@/config'，打印cfg

vue.config.js添加

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: (config) => { // 因爲咱們修改了渲染進程目錄，修改'@'的alias
    config.resolve.alias.set('@', resolve('src/renderer'))
  },
  builderOptions: {
    appId: process.env.VUE_APP_APPID,
    productName: process.env.VUE_APP_PRODUCTNAME,
    extraMetadata: {
      name: process.env.VUE_APP_APPID.split('.').pop(),
      version: process.env.VUE_APP_VERSION
    },
    asar: true,
    directories: {
      output: "dist_electron",
      buildResources: "build",
      app: "dist_electron/bundled"
    },
    files: [
      {
        filter: [
          "**"
        ]
      }
    ],
    extends: null,
    electronVersion: "11.3.0",
    extraResources: [],
    electronDownload: {
      mirror: "https://npm.taobao.org/mirrors/electron/"
    },
    dmg: {
      contents: [
        {
          type: "link",
          path: "/Applications",
          x: 410,
          y: 150
        },
        {
          type: "file",
          x: 130,
          y: 150
        }
      ]
    },
    mac: {
      icon: "public/icons/icon.icns"
    },
    nsis: {
      oneClick: false,
      perMachine: true,
      allowToChangeInstallationDirectory: true,
      warningsAsErrors: false,
      allowElevation: false,
      createDesktopShortcut: true,
      createStartMenuShortcut: true
    },
    win: {
      target: "nsis",
      icon: "public/icons/icon.ico",
      requestedExecutionLevel: "highestAvailable"
    },
    linux: {
      "icon": "public/icons"
    },
    publish: {
      provider: "generic",
      url: "http://127.0.0.1"
    }
  }
  ............
}

builderOptions是electron的打包配置，參考連接，以前打包的話因爲網絡緣由，下載electron包可能會下載失敗或特慢，這裏配置electronDownload爲淘寶源，原本electron的name及version是讀取package.json裏面的值的，這裏使用extraMetadata把這兩個值注入進package.json，其餘配置可自行修改。

icons

打包是須要icons的，windows呢須要.ico，mac須要icns，你可使用icofx進行生成(後續有時間的話會補充)，這裏呢我使用的是一個插件直接生成的

yarn add -D electron-icon-builder
package.json添加
"icons": "electron-icon-builder --input=./public/icons/icon.png --output=public --flatten",

在public下新建icons文件夾，再把你的icon.png(512*512)放在裏面，運行npm run icons就會在icons裏面生成對應的圖片了。

最後：運行打包命令，分別打dev，test，prod包安裝，打開軟件查看打印的cfg是否正確。

補充

若是使用npm install或yarn install出現錯誤時，通常來講是網絡問題，先刪除node_modules，而後在根目錄新建.npmrc文件，添加electron_mirror=https://npm.taobao.org/mirrors/electron/，注意不要使用cnpm安裝，可能會出現各類問題。

本文地址：連接
本文github地址：連接