為何捐款
API 瀏覽器
升級指南
NEW!
quasar.config 檔案
轉換為搭配 Webpack 的 CLI
瀏覽器相容性
支援 TypeScript
目錄結構
命令列表
CSS 預處理器
路由
懶加載 - 代碼分割
處理資源
啟動檔案
預取功能
API 代理
處理 Webpack
處理 process.env
使用 Pinia 的狀態管理
使用 Vuex 的狀態管理
Linter
測試與稽核
開發行動應用程式
Ajax 請求
開放 Dev Server 給公眾
搭配 Webpack 的 Quasar CLI - @quasar/app-webpack
Electron 建置命令

開發中

$ quasar dev -m electron

# ..or the longer form:
$ quasar dev --mode electron

# passing extra parameters and/or options to
# underlying "electron" executable:
$ quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox
# when on Windows and using Powershell:
$ quasar dev -m electron '--' --no-sandbox --disable-setuid-sandbox

它會開啟一個包含開發人員工具的 Electron 視窗。您針對渲染程序有 HMR,並且也會接收到主程序的變更(但後者會在每次變更時重新啟動 Electron 視窗)。

請查看「配置 Electron」頁面,了解如何調整主程序和預載腳本的 Webpack 配置物件。

Chrome 開發人員工具

在開發模式中,按下以下組合鍵(當您的應用程式視窗處於焦點時)

  • macOS:Cmd Alt IF12
  • Linux:Ctrl Shift IF12
  • Windows:Ctrl Shift IF12

Vuejs 開發人員工具

如果您也想存取渲染執行緒的 Vue 開發人員工具

$ quasar dev -m electron --devtools

生產環境建置

$ quasar build -m electron

# ..or the longer form:
$ quasar build --mode electron

它會為生產環境建置您的應用程式,然後使用 @electron/packager 將其打包成可執行檔。請查看「配置 Electron」頁面,了解如何配置此功能。

如果您想要啟用 UI 程式碼除錯功能的生產環境建置

$ quasar build -m electron -d

# ..or the longer form
$ quasar build -m electron --debug

給非 Windows 使用者的注意事項

如果您想使用非 Windows 平台為 Windows 建置具有自訂圖示的應用程式,您必須安裝 wine更多資訊

發佈(僅限 electron-builder)

$ quasar build -m electron -P always

# ..or the longer form:
$ quasar build --mode electron --publish always

您可以指定使用 electron-builder 來建置您的應用程式,可以直接在命令列上使用 (--bundler builder),或是在 /quasar.config 檔案中的 electron.bundler 明確設定。當使用 @electron/packager 時,此標誌無效。

目前(2019 年 6 月)支援的發佈目的地包括 GitHub、Bintray、S3、Digital Ocean Spaces 或通用 HTTPS 伺服器。更多資訊,包括如何建立有效的發佈指示,可以在此處找到。

-P 的有效選項為 “onTag”、“onTagOrDraft”、“always” 和 “never”,這些選項在上方的連結中已說明。此外,您必須在 /quasar.config 檔案中的 electron.builder 中設定有效的發佈配置指示。

將 Windows EXE 安裝程式檔案發佈到 Amazon S3 的非常基本配置可能如下所示

/quasar.config 檔案

electron: {
  bundler: 'builder', // set here instead of using command line flag --bundler
  builder: {
    appId: 'com.electron.myelectronapp',
    win: {
      target: 'nsis'
    },
    publish: {
      'provider': 's3',
      'bucket': 'myS3bucket'
    }
  }