为什么捐赠
API 资源管理器
升级指南
NEW!
quasar.config 文件
转换为 CLI with Webpack
浏览器兼容性
支持 TypeScript
目录结构
命令列表
CSS 预处理器
路由
延迟加载 - 代码分割
处理资产
启动文件
预取功能
API 代理
处理 Webpack
处理 process.env
使用 Pinia 进行状态管理
使用 Vuex 进行状态管理
代码检查工具
测试 & 审计
开发移动应用
Ajax 请求
将开发服务器公开
使用 Webpack 的 Quasar CLI - @quasar/app-webpack
Electron 升级指南

升级 Electron

当您首次在 Quasar 项目中添加 Electron 模式时,您将获得最新版本的 Electron 包。在某个时间点,您将需要升级 Electron 版本。

在升级 Electron 之前,请查看其发布说明。是否有重大更改?


# from the root of your Quasar project
$ yarn upgrade electron@latest

从 Quasar v1 升级

Quasar v2 的 Electron 模式是对以前版本的几乎彻底改革,极大地改善了开发人员体验。这里的一些更改是必需的,以确保与 Electron 世界的最新发展保持兼容(因此为即将到来的上游更改提供防弹性能)。

改进概览

  • 开箱即用支持 Typescript。只需将 electron-main.js 和 electron-preload.js 重命名为 electron-main.ts 和 electron-preload.ts。
  • 支持 Electron 11 并准备开箱即用支持 Electron 12+ 中的即将到来的更改(无需您在将来进行任何更改)。其中一项更改是我们将使用 contextIsolation 而不是已弃用的 Node Integration
  • 预加载脚本不再有旧的限制。您可以使用相对路径导入其他 js 文件,因为脚本现在已捆绑并通过 Babel 传递(因此您也可以使用 import X from Y 语法)。您还可以为其启用 linting。
  • 您还可以为主线程和预加载脚本启用 linting。
  • 我们已删除默认的 electron-main.dev.js 支持,因为它似乎不再需要。但是,您可以通过创建它并从 electron-main 中引用它来将其添加回来(它不再由 Quasar CLI 自动检测 - 因为我们不需要;稍后将详细介绍)。

/src-electron 文件夹

结构是

icon.icns
# Darwin(MacOS)平台的图标文件
icon.ico
# win32(Windows)平台的图标文件
linux-512x512.png
# Linux 平台的图标文件(使用 electron-builder 时)
electron-preload.js
# Electron 预加载脚本(将 Node.js 内容注入渲染器线程)
electron-main.dev.js
# 主线程代码(仅在开发代码之前)
electron-main.js
# 主线程代码(生产代码)

结构是

icon.icns
# Darwin(MacOS)平台的图标文件
icon.ico
# win32(Windows)平台的图标文件
icon.png
# 所有平台(尤其是 Linux)的托盘图标文件
electron-preload.js
# (或 .ts) Electron 预加载脚本(将 Node.js 内容注入渲染器线程)
electron-main.js
# (或 .ts) 主线程代码

请注意,不再有 electron-main.dev.js 文件(不再需要),并且 electron-preload/main.js 文件需要直接移动到 /src-electron 下。

electron-main.js 文件

为了与未来版本的 Electron 向后兼容,您需要进行一些小的(但重要的!)更改

旧方法

mainWindow = new BrowserWindow({
  // ...
  webPreferences: {
    nodeIntegration: process.env.QUASAR_NODE_INTEGRATION,
    nodeIntegrationInWorker: process.env.QUASAR_NODE_INTEGRATION,
    // preload: path.resolve(__dirname, 'electron-preload.js')
  }
})
新方法

mainWindow = new BrowserWindow({
  // ...
  webPreferences: {
    // we enable contextIsolation (Electron 12+ has it enabled by default anyway)
    contextIsolation: true,
    // we use a new way to reference the preload script
    // (it's going to be needed, so add it and create the file if it's not there already)
    preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
  }
})

electron-preload.js 文件

如果您还没有此文件,则需要它。因此,如果它丢失,请创建它。没有它,您将无法在渲染器线程中使用 Node.js 的强大功能。

更多信息:预加载脚本.

警告

您需要将所有 Node.js 内容从渲染器线程(来自 /src 的 UI 代码)转移到预加载脚本中。通过 contextBridge 提供相同的功能,如下所示。

这是 electron-preload.js 的默认内容

/**
 * This file is used specifically for security reasons.
 * Here you can access Nodejs stuff and inject functionality into
 * the renderer thread (accessible there through the "window" object)
 *
 * WARNING!
 * If you import anything from node_modules, then make sure that the package is specified
 * in package.json > "dependencies" and NOT in "devDependencies"
 *
 * Example (injects window.myAPI.doAThing() into renderer thread):
 *
 *   const { contextBridge } = require('electron')
 *
 *   contextBridge.exposeInMainWorld('myAPI', {
 *     doAThing: () => {}
 *   })
 */

quasar.config 文件更改

旧方法

electron: {
  // it's gone now (upcoming upstream breaking change)
  // replaced by a change in electron-main.js documented earlier
  nodeIntegration: true, // remove me!

  // renamed to chainWebpackMain
  chainWebpack (chain) { /* ... */ },

  // renamed to extendWebpackMain
  extendWebpack (cfg) { /* ... */ }
}
新方法

electron: {
  // was renamed from chainWebpack()
  chainWebpackMain (chain) {
    // example for its content (adds linting)
    chain.plugin('eslint-webpack-plugin')
      .use(ESLintPlugin, [{ extensions: ['js'] }])
  },

  // was renamed from extendWebpack()
  extendWebpackMain (cfg) { /* ... */ },

  // New!
  chainWebpackPreload (chain) {
    // example (adds linting)
    chain.plugin('eslint-webpack-plugin')
      .use(ESLintPlugin, [{ extensions: ['js'] }])
  }

  // New!
  extendWebpackPreload (cfg) { /* ... */ }
}

渲染器线程 (/src)

$q 对象 不再包含 electron 属性。您需要使用 预加载脚本 来访问它并将其提供给渲染器线程。

此外,openURL 实用程序不再能够利用 Electron 打开新窗口。您需要从预加载脚本提供自己的实用程序。

警告

您需要将所有 Node.js 内容从渲染器线程(来自 /src 的 UI 代码)转移到预加载脚本中。通过 contextBridge 提供相同的功能,如上面的预加载脚本部分所示。

浏览器开发者工具

您可能还想在您的 electron-main.js 中添加以下代码,以便在开发模式(或具有调试功能的生产模式)下自动打开开发者工具,并在生产构建中禁用开发者工具(没有调试功能)。

function createWindow () {
  mainWindow = new BrowserWindow({ /* ... */ })

  if (process.env.DEBUGGING) {
    // if on DEV or Production with debug enabled
    mainWindow.webContents.openDevTools()
  }
  else {
    // we're on production; no access to devtools pls
    mainWindow.webContents.on('devtools-opened', () => {
      mainWindow.webContents.closeDevTools()
    })
  }
}