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

r囧r小猫 2022-04-23 08:02 633阅读 0赞

Electron Forge 是一个用来构建现代化Electron应用的完善的工具。 Electron Forge将多个现有的（ 且有稳定维护的 ）Electron构建工具整合为一个简单易用的工具包，所有人都可以用它来快速地搭建Electron开发环境。

其中forge支持的框架模版可以参考下面的网址：  
[https://electronforge.io/templates][https_electronforge.io_templates]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70]

使用yarn安装 electron-forge：

yarn global add  electron-forge

创建electron-vue项目：

electron-forge init my-new-project --template=vue

创建成功后的目录结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 1]

相比较electro-vue创建的项目目录，这个目录结构可谓是十分简洁了。

我们看看package.json文件的内容：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 2]

在index.html页面中，我们可以看到怎么使用vue：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 3]

我们可以看到这里创建了一个vue的实例，然后挂载在了id为test的div上，让我们的网页秒变成了一个vue项目。

接下来我们进行一点小的改动，让其的目录结构和electron-vue更加接近，也方便我们后续的使用。

首先我们将vue的版本进行一下小小的升级，查看npm中vue的最新版本：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 4]  
当前版本未：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官网找到这信息(上面的页面往下看)：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 5]

在工程目录下安装这两者：

yarn add vuex
    yarn add vue-router

安装后，package.json会添加两者到dependencies：

"vue-router": "^3.0.2",
    "vuex": "^3.1.0"

在src目录下创建router和store文件夹，并分别创建index.js:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 6]

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下面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 7]

增加一个App.vue在根目录，作为vue的顶层路由组件：

<template>
      <router-view></router-view>
    </template>
    
    <script>
    export default {
      name: 'App',
    }
    </script>

接下来我们就需要修改index.html：

这里挂载vue实例，注意组件App请使用render: h => h(App)的方式，此时使用template的方式挂载是无法正常显示的。

运行程序：

yarn start

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 8]  
接下来我们试试打包程序：

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文件夹：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 10]

electron-forge make 这个才会打出真正的分发包，放在out\\make目录下  
使用–arch 和–platform参数来指定系统结构和平台,默认和当前系统一致  
另外.make是用squirrel打出来的包，安装后是放在%localappdata%下.

yarn make

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 11]  
使用默认配置打出来的包安装后源代码是可见的，这点大家的注意下了。

这里我们还是使用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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 12]

[https_electronforge.io_templates]: https://electronforge.io/templates
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70]: /images/20220322/1180a25af5d24e2b95b7f4e20fa64f0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 1]: /images/20220322/ad661fcbb365411db57ffb1496e7c7cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 2]: /images/20220322/9245ee267fbd4a24b5cfca8d9098ea14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 3]: /images/20220322/2b5154774a1747f695d136328e6cbbbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 4]: /images/20220322/b4ff78f2619949ca988fb7c12e9617ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 5]: /images/20220322/c4f3d95e22fb44578270d1e55ed31038.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 6]: /images/20220322/4513f0b003e947fd9af38378eb08e19a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 7]: /images/20220322/9c924125b5cb4057b93a19347090cfd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 8]: /images/20220322/da377d82dc824a428142db0c241b94db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 9]: /images/20220322/c4b4d3a4b3b842a69711bfd81b9f39ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 10]: /images/20220322/9244e71fc9894a5da02fef77671044ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 11]: /images/20220322/65e019dbaf454b3a9e262429690194a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fpbmd5dWxvdmU_size_16_color_FFFFFF_t_70 12]: /images/20220322/a72e86797eea4b31a59bfa723c3be9b5.png