electron项目使用vue以及打包生成安装程序

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