從零開始的 electron 開發(fā)-項(xiàng)目搭建
本文搭建基于vue cli提供的vue-cli-plugin-electron-builder進(jìn)行腳手架搭建。
electron的優(yōu)點(diǎn)和缺點(diǎn)已經(jīng)有各種分析了，這里不再多述，如果你是一個(gè)前端開發(fā)，想把現(xiàn)有頁面轉(zhuǎn)化成桌面軟件，并且能有win，mac，linux的版本，那么electron不失為一個(gè)好的選擇，當(dāng)然一個(gè)多端的框架優(yōu)缺點(diǎn)都是很明顯的，既然想快速開發(fā)那么就得舍棄點(diǎn)東西，比如體積大小，性能等等。
開發(fā)前的準(zhǔn)備
說到底electron本質(zhì)上就是一個(gè)基于Chromium的應(yīng)用，通俗點(diǎn)說，這個(gè)桌面軟件就是一個(gè)瀏覽器，我們寫的東西在瀏覽器中展示，是不是一下子就回到熟悉領(lǐng)域了，那么在開發(fā)前你得知道前端三駕馬車 HTML, CSS 和 JavaScript，涉及到一些文件等的處理的話那么會(huì)有些許node的知識(shí)。
安裝
`npm install -g @vue/cli
vue create electron-vue
# 自行選擇vue版本，由于electron使用的是Chromium，那么我們可以不必考慮兼容性的問題，我這里直接選擇vue3（看個(gè)人喜好）
cd electron-vue
vue add electron-builder
# 選擇electron版本號(hào)，這里我選擇的是`11.0.0`
# 安裝完成之后會(huì)有`src/background.js`文件，`package.json`中會(huì)多出幾條electron的build及serve命令
npm run electron:serve
# 稍等一會(huì)兒（Vue Devtools首次安裝問題）會(huì)有一個(gè)桌面窗口出現(xiàn)，ok安裝就完成啦，接下來我們對(duì)其進(jìn)行改造。`
說明
改造前說明一下：electron開發(fā)和我們普通的開發(fā)有所不同，它是有兩種進(jìn)程的：主進(jìn)程和渲染進(jìn)程
主進(jìn)程src/background.js：管理所有渲染進(jìn)程（怎么配置桌面軟件，怎么打開桌面軟件，怎么相互通信等等）。 渲染進(jìn)程：說得直白點(diǎn)就是網(wǎng)頁（就是打開我們單頁的網(wǎng)頁）
改造
src目錄改造
現(xiàn)在的結(jié)構(gòu)如下：
├─src # 源碼目錄
│ ├─main # 主進(jìn)程目錄
│ │ └─index.js # 主進(jìn)程入口
│ └─renderer # 渲染進(jìn)程文件夾
│ ├─assets
│ ├─components
│ ├─App.vue
│ └─main.js # 渲染進(jìn)程入口
添加 vue.config.js
在根目錄新建vue.config.js，添加
module.exports = {
pluginOptions: {
electronBuilder: {
mainProcessFile: 'src/main/index.js', // 主進(jìn)程入口文件
rendererProcessFile: 'src/renderer/main.js', // 渲染進(jìn)程入口文件
mainProcessWatch: ['src/main'], // 檢測(cè)主進(jìn)程文件在更改時(shí)將重新編譯主進(jìn)程并重新啟動(dòng)
}
}
}
這里我們可以通過設(shè)置pages來修改其入口文件，并且這樣還可以打包多頁
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', // 主進(jìn)程入口文件
mainProcessWatch: ['src/main'], // 檢測(cè)主進(jìn)程文件在更改時(shí)將重新編譯主進(jìn)程并重新啟動(dòng)
}
}
}
嘗試分別運(yùn)行web的serve、build及electron的serve、build，看是否能成功運(yùn)行(打包可能會(huì)因?yàn)榫W(wǎng)絡(luò)原因，下載electron包失敗，如果未添加.npmrc請(qǐng)參考結(jié)尾補(bǔ)充)。
環(huán)境變量配置
.env # 本地開發(fā)
.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開發(fā)
VUE_APP_VERSION=0.0.1
BASE_URL=/
注：.env 的NODE_ENV設(shè)置development，其余打包的請(qǐng)?jiān)O(shè)置production
NODE_ENV: webpack運(yùn)行的模式
VUE_APP_ENV：我們自己使用的環(huán)境變量(通過這個(gè)判斷我們是什么環(huán)境)，比如.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開發(fā)，electron測(cè)試，···
VUE_APP_VERSION：electron的version配置
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",
環(huán)境變量檢測(cè)及打包配置
添加config配置
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
打包配置
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: (config) => { // 由于我們修改了渲染進(jìn)程目錄，修改'@'的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"
}
}
............
}
icons
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)放在里面，運(yùn)行npm run icons就會(huì)在icons里面生成對(duì)應(yīng)的圖片了。
補(bǔ)充
評(píng)論
圖片
表情