vuecli4 electron13.3.0 创建客户端应用以及安装、打包时候遇到的问题

1、创建项目

// 这个步骤不在多说

vue create vue-electron-demo

2、添加electron

# 项目创建完毕之后,进入项目文件夹

cd vue-electron-demo

# 添加electron

vue add electron-bilder

注意，这里开始出现问题。

不管你的npm是不是淘宝镜像，你会发现这个electron下载的很慢或者干脆就是报错。

这里有个技巧：

当执行到

node install.js ....

你就需要ctrl+c，强制退出了。

退出之后，进入node_moudles,找到electron这个文件夹，找到install.js并打开。

 打开之后，找到如下代码，然后添加一段代码

// downloads if not cached
downloadArtifact({
  version,
  artifactName: 'electron',
  force: process.env.force_no_cache === 'true',
  cacheRoot: process.env.electron_config_cache,
  platform: process.env.npm_config_platform || process.platform,
  arch: process.env.npm_config_arch || process.arch,
  //============ 新添加的代码开始 ==============
  mirrorOptions:{
    mirror: 'https://npm.taobao.org/mirrors/electron/',
    customDir: version
  }
  //============ 新添加的代码结束 ==============
}).then(extractFile).catch(err => {
  console.error(err.stack);
  process.exit(1);
});

 添加完毕之后，还没完，需要打开cmd，进入到这层文件夹下，手动执行

node install.js

这段操作，就是指定electron去淘宝镜像上下载资源。

然后这就可以了。直接运行。

如果你后边又安装了某个别的依赖，那么你会发现又出问题了。

他会报错，can not found moudle 'electron'.

这就是你之后安装了某个依赖之后，这个electron又会通过npm去找资源，还是找不到。

那么，需要重新npm install。执行到 electron ---- node install.js 这一步还是要重新强制退出，按照上边的步骤再来一次即可。

这样重新启动项目就可以。 

3、electron添加托盘功能

找到src下的background.js。打开

import {
    app,
    protocol,
    BrowserWindow,

} from 'electron'

如上，最上边应该是这样的。现在我们还需要引入menu， tray这两个模块。如下：

import {
    app,
    protocol,
    BrowserWindow,
    Menu,
    Tray
} from 'electron'

然后找到createwin这个方法修改如下：

async function createWindow() {
    // Create the browser window.
    let win = null;
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {

            // Use pluginOptions.nodeIntegration, leave this alone
            // See nklayman.github.io/vue-cli-plugin-electron-        builder/guide/security.html#node-integration for more info
            nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
            contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
        },
        //icon: `${__static}/app.ico`
    })


    if (process.env.WEBPACK_DEV_SERVER_URL) {
        // Load the url of the dev server if in development mode
        await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
        if (!process.env.IS_TEST) win.webContents.openDevTools()
    } else {
        createProtocol('app')
        // Load the index.html when not in development
        win.loadURL('app://./index.html')
    }

   
    win.on('closed', () => {
        win = null;
    });

    
    // 设置托盘
    // Exit cleanly on request from parent process in development mode.
    if (isDevelopment) {
        if (process.platform === 'win32') {
            /* process.on('message', (data) => {
                if (data === 'graceful-exit') {
                    app.quit()
                }
            }) */

            
            // ************************* 系统托盘右键菜单  *************************
            var trayMenuTemplate = [
                {
                    label: '显示',
                    click: function() {
                        !win.isVisible() ? win.show() : null
                    }
                },
                {
                    label: '配置',
                    click: function() {
                        //app.quit()
                        let child = null;
                        child = new BrowserWindow({ 
                            parent: win,
                            width: 500,
                            height: 500,
                            webPreferences: {
                                nodeIntegration: true
                            }
                        })
                        let htmlUrl = path.join(__dirname, './child.html');
                        child.loadURL(htmlUrl);                    
                        child.on('closed', () => {
                            child = null;
                        });
                    }
                },
                {
                    label: '退出',
                    click: function() {
                        // ipc.send('close-main-window');
                        app.quit()
                    }
                }
            ]

            // 系统托盘图标目录 path.join(__static, './logo_1.ico')
            let trayIcon = path.join(__dirname, './favicon.ico')
        
            appTray = new Tray(trayIcon)
        
            // 图标的上下文菜单
            const contextMenu = Menu.buildFromTemplate(trayMenuTemplate)
        
            // 设置此托盘图标的悬停提示内容
            appTray.setToolTip('工器具管理系统')
        
            // 设置此图标的上下文菜单
            appTray.setContextMenu(contextMenu)
            
            // 双击托盘显示隐藏
            appTray.on('double-click', () => {  win.isVisible() ? win.hide() : win.show()})

        } else {
            process.on('SIGTERM', () => {
                app.quit()
            })
        }
    }

}

4、electron打包

在vue.config.js中写入如下配置：

module.exports = {
    // 公共路径
    publicPath: IS_PROD ? './' : '/',
    

    ......




    // 添加electron - app - 配置
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                productName: 'ToolsManag',//项目名，也是生成的安装文件名
                //copyright: "Copyright © 2019",//版权信息
                win: {
                    icon: './public/tool.ico',
                    target: [
                        {
                            target: "nsis",//利用nsis制作安装程序
                            arch: [
                            "x64",//64位
                            ]
                        }
                    ]
                },
                nsis: {
                    oneClick: false, // 是否一键安装
                    allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
                    allowToChangeInstallationDirectory: true, // 允许修改安装目录
                    installerIcon: "./public/tool.ico",// 安装图标
                    uninstallerIcon: "./public/tool.ico",//卸载图标
                    installerHeaderIcon: "./public/tool.ico", // 安装时头部图标
                    createDesktopShortcut: true, // 创建桌面图标
                    createStartMenuShortcut: true,// 创建开始菜单图标
                    shortcutName: "Tools", // 图标名称
                },
               directories: {
                    output: "./electronSetup"//输出文件路径
               },
            }
        }
    },

}

然后运行：

npm run electron:build

看到如下结果就是成功了：

打包失败怎么办？

如果遇到github网速差（这可能是经常的事情），那么就需要手动下载了。

报错一：

https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.4.1/nsis-3.0.4.1.7z

解决方案：

手动下载如上报错地址上的资源。推荐一个网站下载github资源：GitHub 加速下载 - 在线工具http://toolwa.com/github/

直接输入地址即可下载。下载完成后，放在c盘，用户下的AppData/local/electron/nins，如下图所示：

报错2：

https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z 

解决方案：

同样拿着这个地址去上边的网站下载资源。下载完成后如下图放置（注意需要新建文件夹）；

 总之，一般报错就是因为网速不好，比如github无法访问。所以只好离线下载，缺少什么，就下载什么就可以了。

如上基本实现了一个基于vue的客户端开发的功能。