Electron 12 学习(四)Vue CLI Plugin Electron Builder 安装与配置

Electron 12 学习 专栏收录该内容
12 篇文章 1 订阅
  1. 添加 Vue CLI Plugin Electron Builder:

    vue add electron-builder
    
    D:\WebstormProjects\Electron-12-Study>vue add electron-builder
    
    📦  Installing vue-cli-plugin-electron-builder...
    
    + vue-cli-plugin-electron-builder@2.0.0
    added 238 packages from 119 contributors in 26.513s
    
    106 packages are looking for funding
      run `npm fund` for details
    
    ✔  Successfully installed plugin: vue-cli-plugin-electron-builder
    
    
    🚀  Invoking generator for vue-cli-plugin-electron-builder...
    📦  Installing additional dependencies...
    
    
    > electron-12-study@1.0.0 postinstall D:\WebstormProjects\Electron-12-Study
    > electron-builder install-app-deps
    
      • electron-builder  version=22.10.5
    added 7 packages from 5 contributors in 10.556s
    
    107 packages are looking for funding
      run `npm fund` for details
    
    ⚓  Running completion hooks...
    
    ✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
    
    D:\WebstormProjects\Electron-12-Study>
    
  2. 查看项目启动脚本:

      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "electron:build": "vue-cli-service electron:build",
        "electron:serve": "vue-cli-service electron:serve",
        "postinstall": "electron-builder install-app-deps",
        "postuninstall": "electron-builder install-app-deps",
        "start": "electron .",
        "test": "echo \"Error: no test specified\" && exit 1"
      }
    
    • serve:vue 开发
    • build:vue 打包
    • lint:格式化
    • electron:build:Electron 打包
    • electron:serve:Electron 开发
  3. 启动 Electron:

    "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run electron:serve --scripts-prepend-node-path=auto
    
    > electron-12-study@1.0.0 electron:serve D:\WebstormProjects\Electron-12-Study
    > vue-cli-service electron:serve
    
     INFO  Starting development server...
    98% after emitting CopyPlugin
    
     DONE  Compiled successfully in 1474ms                                                                                                                                       下午3:35:34
    
    
      App running at:
      - Local:   http://localhost:8080/
      - Network: http://192.168.2.101:8080/
    
      Note that the development build is not optimized.
      To create a production build, run npm run build.
    
    \  Bundling main process...
    
     DONE  Compiled successfully in 1008ms                                                                                                                                       下午3:35:35
    
      File                      Size                                                                         Gzipped
    
      dist_electron\index.js    791.19 KiB                                                                   173.34 KiB
    
      Images and other types of assets omitted.
    
     INFO  Launching Electron...
    Failed to fetch extension, trying 4 more times
    Failed to fetch extension, trying 3 more times
    Failed to fetch extension, trying 2 more times
    Failed to fetch extension, trying 1 more times
    Failed to fetch extension, trying 0 more times
    Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT
    

    已上内容提示安装Vue Devtools连接失败,可通过禁用Vue Devtools安装解决:

    app.on('ready', async () => {
      // if (isDevelopment && !process.env.IS_TEST) {
      //   // Install Vue Devtools
      //   try {
      //     await installExtension(VUEJS_DEVTOOLS)
      //   } catch (e) {
      //     console.error('Vue Devtools failed to install:', e.toString())
      //   }
      // }
      createWindow()
    })
    
  4. 调整项目结果,并删除无用文件:

    • Electron 主脚本文件:background.js
      • 增加path引入
        const path = require('path')
        
      • 修改webPreferences
        其中__static代表public文件夹
        	webPreferences: {
              preload: path.join(__static, 'preload.js')
         	}
        
    • preload.js文件移动到public文件夹
    • 删除index.js文件,Electron现在的主脚本文件为background.js
    • 将项目根目录中的index.html文件中的p标签复制到public/index.html中,并删除index.html文件:
      <!DOCTYPE html>
      <html lang="zh">
        <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width,initial-scale=1.0">
          <link rel="icon" href="<%= BASE_URL %>favicon.ico">
          <title><%= htmlWebpackPlugin.options.title %></title>
        </head>
        <body>
          <p>
            We are using Node.js <span id="node-version"></span>,
            Chromium <span id="chrome-version"></span>,
            and Electron <span id="electron-version"></span>.
          </p>
          <noscript>
            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
          </noscript>
          <div id="app"></div>
          <!-- built files will be auto injected -->
        </body>
      </html>
      
  5. 启动项目:
    下图可观察到Vue项目中与Electron项目结合在一起了(使用preload.js在Vue项目中注入了一些代码,并非Vue与Electron项目深度结合。)
    ps. 可使用preload.js屏蔽百度搜索结果中广告
    在这里插入图片描述

  6. 源码:
    Github
    CodeChina
    Gitee

  • 0
    点赞
  • 3
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值