5.electron引入Vue，并进行打包配置

站长

2022年12月04日 17:01 · 阅读数 19

electron引入vue

在前面的文章中，咱们已经了解了electron中常用的几个模块，有小伙伴发现，前边的例子只是简单的js+html，今天nic带着大家一起，将electron与vue结合在一起，看看效果是怎样的！

那么 Vue 怎么和 Electron结合呢？毕竟学习这个初衷，就是把 Vue 项目变成一个桌面应用。别急，接下来咱们先了解下两个工具。

Vue CLI Plugin Electron Builder 和 electron-vue是两个能将Vue引入Electron项目的工具。electron-vue项目推出的时间较早，拥有更多的用户，但是已经超过一年没有更新了；Vue CLI Plugin Electron Builder虽然用户较少，但维护及时，且基于Vue Cli 3开发，更符合Vue使用约定

准备工作

首先需要确定自己安装了node 和 vue

win + r 打开命令行工具

1.安装Vue CLI

npm install -g  @vue/cli
或
yarn global add @vue/cli

2.使用Vue CLI创建一个Vue项目

vue create electron_demo

效果如下： 5.electron引入Vue，并进行打包配置

5.electron引入Vue，并进行打包配置

这里咱们使用Sass/Scss预处理，它可以使我们更快、更优雅地编写前端样式代码。

通过以上步骤，咱们就创建出来了一个Vue项目。

引入Vue CLI Plugin Electron Builder

接着上一个步骤：

vue add electron-builder

npn run electron:serve

运行效果如下：

5.electron引入Vue，并进行打包配置

项目目录如下： 5.electron引入Vue，并进行打包配置

dist_electron 目录存放应用打包后的安装程序
public 目录存放项目的静态资源，此目录下的程序不会被webpack处理
src/background.js 是主进程入口程序
src/main.js 是渲染进程入口程序

细心的小伙伴会发现，运行的时候特别慢，等了好久窗口才出来：

5.electron引入Vue，并进行打包配置

因为网络原因，所以很慢，将background.js中的这段代码注释掉就好啦，并不会影响什么。

打包

不管什么程序，都少不了打包这个环节，接下来咱们来尝试打包一下

命令行执行下面的命令 npm run electron:build

这个过程可能出现因为网络不好而下载失败的问题，解决方法如下

下载地址：github.com/electron/el…

下载 electron-v9.0.2-win32-x64.zip 放在下面目录
C:\Users\Administrator\AppData\Local\electron\Cache

下载 winCodeSign-2.6.0.7z 放在下面目录
C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign

下载 nsis-3.0.4.1.7z 放在下面目录
C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis

打包完成后打开dist_electron文件夹内容如下

5.electron引入Vue，并进行打包配置

双击安装：运行效果如下

5.electron引入Vue，并进行打包配置

打包优化

上边的步骤走下来就打包好啦，是不是很简单，运行看起来是没问题，但是是不是感觉少了点什么呢，原来是少了选择安装位置的步骤和应用图标的更换。

5.electron引入Vue，并进行打包配置

cnpm i electron-icon-builder

需要在package.json中scripts添加build-icon指令

input 是选择了test.jpg 这个图片

output 是输出文件夹

  "scripts": {
    "build-icon": "electron-icon-builder --input=./public/test.jpg --output=build --flatten"
  }

npm run build-icon

build完成之后，生成了不同大小的图片

5.electron引入Vue，并进行打包配置

咱们之前安装的Vue CLI Plugin Electron Builder是可以进行打包配置的

首先，在项目目录里新建一个vue.config.js文件，内容如下：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "123456",
        productName: "bigDog", //项目名，也是生成的安装文件名，即aDemo.exe
        copyright: "nicnic © 2022", //版权信息
        directories: {
          output: "./dist" //输出文件路径
        },
        win: {
          //win相关配置
          icon: "./build/icons/icon.ico", //图标，当前图标在根目录下，注意这里有两个坑
          target: [
            {
              target: "nsis", //利用nsis制作安装程序,打包文件的后缀为exe
              arch: [
                "x64", //64位
                "ia32" //32位
              ]
            }
          ]
        },
        nsis: {
          oneClick: false, //一键安装
          language: "2052", //安装语言
          perMachine: true, //应用所有用户
          allowToChangeInstallationDirectory: true //用户可以选择路径
        }
      }
    }
  }
};