Electron Forge 是一个用来构建现代化Electron应用的完善的工具。 Electron Forge将多个现有的( 且有稳定维护的 )Electron构建工具整合为一个简单易用的工具包,所有人都可以用它来快速地搭建Electron开发环境。
其中forge支持的框架模版可以参考下面的网址:
https://electronforge.io/templates
使用yarn安装 electron-forge:
yarn global add electron-forge
创建electron-vue项目:
electron-forge init my-new-project --template=vue
创建成功后的目录结构如下:
相比较electro-vue创建的项目目录,这个目录结构可谓是十分简洁了。
我们看看package.json文件的内容:
在index.html页面中,我们可以看到怎么使用vue:
我们可以看到这里创建了一个vue的实例,然后挂载在了id为test的div上,让我们的网页秒变成了一个vue项目。
接下来我们进行一点小的改动,让其的目录结构和electron-vue更加接近,也方便我们后续的使用。
首先我们将vue的版本进行一下小小的升级,查看npm中vue的最新版本:
当前版本未:2.5.22,修改package.json中vue的版本信息:
"dependencies": {
"electron-compile": "^6.4.4",
"electron-devtools-installer": "^2.1.0",
"electron-squirrel-startup": "^1.0.0",
"vue": "^2.5.22" // 修改为当前npm支持的最新版本
},
执行命令进行更新:
yarn
其次,如果我们的页面足够复杂的话,我们还需要添加vuex和vue-route,同样你可以在npm官网找到这信息(上面的页面往下看):
在工程目录下安装这两者:
yarn add vuex
yarn add vue-router
安装后,package.json会添加两者到dependencies:
"vue-router": "^3.0.2",
"vuex": "^3.1.0"
在src目录下创建router和store文件夹,并分别创建index.js:
store: index.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
const store = new vuex.Store({
})
export default store
router:index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import StartPage from "../component
/StartPage"
// 路由配置
export default new Router({
routes: [
{ path: '/', component: StartPage },
{ path: '*', redirect: '/' }
]
})
其中StartPage就是我们的起始页面,我放在了component下面:
增加一个App.vue在根目录,作为vue的顶层路由组件:
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App',
}
</script>
接下来我们就需要修改index.html:
<script>
import Vue from 'vue';
import App from "./App"
import router from "./router"
import store from "./store"
const app = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
</script>
这里挂载vue实例,注意组件App请使用render: h => h(App)的方式,此时使用template的方式挂载是无法正常显示的。
运行程序:
yarn start
接下来我们试试打包程序:
yarn package
只是打包成一个目录到out目录下,注意这种打包一般用于调试,并不是用于分发
PS D:\pptviewer> yarn package
yarn run v1.12.3
$ electron-forge package
√ Checking your system
√ Preparing to Package Application for arch: x64
√ Compiling Application
√ Preparing native dependencies
√ Packaging Application
Done in 302.47s.
此时会在工程目录下生成out文件夹:
electron-forge make 这个才会打出真正的分发包,放在out\make目录下
使用–arch 和–platform参数来指定系统结构和平台,默认和当前系统一致
另外.make是用squirrel打出来的包,安装后是放在%localappdata%下.
yarn make
使用默认配置打出来的包安装后源代码是可见的,这点大家的注意下了。
这里我们还是使用electron-builder进行打包吧。
yarn add electron-builder --dev
在package.json 添加如下配置:
"scripts": {
"build": "electron-builder",
},
"build": {
"asar": true,
"artifactName": "${productName}-${version}.${ext}",
"compression": "maximum",
"electronDownload": {
"mirror": "http://npm.taobao.org/mirrors/electron/"
},
"nsis": {
"oneClick": false,
"perMachine": true,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true,
"runAfterFinish": true
},
"publish": [
{
"provider": "generic",
"url": "http://localhost/download/"
}
],
"productName": "appname",
"appId": "appid",
"directories": {
"output": "build"
},
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": ""
},
"win": {
"icon": "",
"target": "nsis"
},
"linux": {
"icon": ""
}
},
打包:
yarn build