API 浏览器
Quasar CLI with Webpack - @quasar/app-webpack
移动应用构建命令

在开始之前,请确保你已安装 Cordova CLI。

¥Before we dive in, make sure you got the Cordova CLI installed.

$ npm install -g cordova

开发(Developing)

¥Developing

$ quasar dev -m [ios|android]

# ..or the explicit form:
$ quasar dev -m cordova -T [ios|android]

# ..or the longer form:
$ quasar dev --mode cordova --target [ios|android]

# using a specific emulator (--emulator, -e)
$ quasar dev -m ios -e iPhone-7
# or
$ quasar dev -m ios -e iPhone-X,com.apple.CoreSimulator.SimRuntime.iOS-12-2

# passing extra parameters and/or options to
# underlying "cordova" executable:
$ quasar dev -m ios -- some params --and options --here
# when on Windows and using Powershell:
$ quasar dev -m ios '--' some params --and options --here

但是,如果你希望打开 IDE(Android Studio / Xcode),并从中手动选择模拟器(或同时选择多个模拟器!)在其上运行开发应用(或在真实的移动/平板设备上运行开发应用):

¥However, if you wish to open the IDE (Android Studio / Xcode) and from there to manually select the emulator (or multiple ones simultaneously!) to run the dev app on it/them (or to run the dev app on a real mobile/tablet device):

$ quasar dev -m [ios|android] --ide

警告

在 Android Studio 中,你将收到一条建议升级 Gradle 版本的消息。请勿升级 GRADLE,因为它会破坏 Cordova 项目。其他任何请求的升级也相同。

¥In Android Studio, you will be greeted with a message recommending to upgrade the Gradle version. DO NOT UPGRADE GRADLE as it will break the Cordova project. Same goes for any other requested upgrades.

Gradle upgrade

如果你遇到任何 IDE 错误,请点击“文件”>“使缓存无效”,然后重新启动。

¥If you encounter any IDE errors then click on File > Invalidate caches and restart.

Gradle upgrade

为了让你能够在设备模拟器上或直接在手机上进行开发(包含热模块重新加载),Quasar CLI 遵循以下步骤:

¥In order for you to be able to develop on a device emulator or directly on a phone (with Hot Module Reload included), Quasar CLI follows these steps:

  1. 检测你机器的外部 IP 地址。如果检测到多个这样的 IP,它会要求你选择一个。如果你使用手机进行开发,请选择可从手机/平板电脑 ping 通的机器 IP 地址。

    ¥Detects your machine’s external IP address. If there are multiple such IPs detected, then it asks you to choose one. If you’ll be using a mobile phone to develop then choose the IP address of your machine that’s pingable from the phone/tablet.

  2. 它会在你的机器上启动一个开发服务器。

    ¥It starts up a development server on your machine.

  3. 它会临时更改 /src-cordova/config.xml 中的 <content/> 标签,使其指向之前检测到的 IP。这允许应用连接到开发服务器。

    ¥It temporarily changes the <content/> tag in /src-cordova/config.xml to point to the IP previously detected. This allows the app to connect to the development server.

  4. 它会使用 Cordova CLI 构建一个原生应用,并使用临时更改的 config.xml 文件。

    ¥It defers to Cordova CLI to build a native app with the temporarily changed config.xml.

  5. Cordova CLI 会检查手机/平板电脑是否连接到你的开发机器。如果是,则会在其上安装开发应用。如果没有找到,则启动模拟器并运行开发应用。

    ¥Cordova CLI checks if a mobile phone / tablet is connected to your development machine. If it is, it installs the development app on it. If none is found, then it boots up an emulator and runs the development app.

  6. 最后,它会还原对 /src-cordova/config.xml 所做的临时更改。

    ¥Finally, it reverts the temporary changes made to /src-cordova/config.xml.

危险

如果在手机/平板电脑上进行开发,务必确保构建机器的外部 IP 地址能够通过手机/平板电脑访问,否则你将获得一个白屏的开发应用。还要检查你计算机的防火墙,以允许连接到开发所选的端口。

¥If developing on a mobile phone/tablet, it is very important that the external IP address of your build machine is accessible from the phone/tablet, otherwise you’ll get a development app with white screen only. Also check your machine’s firewall to allow connections to the development chosen port.

启用 iOS 现代构建(Enabling iOS modern build)

¥Enabling iOS modern build

默认情况下,由于 Cordova 问题,Xcode 的 iOS 现代构建版本已禁用。但是,如果你知道自己在做什么并且想要启用它,请从 /quasar.config 文件执行此操作:

¥By default, Xcode modern build for iOS is disabled due to Cordova issues. However, if you know what you are doing and you want to enable it, do so from the /quasar.config file:

cordova: {
  noIosLegacyBuildFlag: true
}

如果你想在 “build.json” 中指定构建类型,以上内容也适用。

¥The above applies also if you want to specify the build type in your “build.json”.

生产环境构建(Building for Production)

¥Building for Production

$ quasar build -m [android|ios]

# ..or the explicit form:
$ quasar build -m cordova -T [ios|android]

# ..or the longer form:
$ quasar build --mode cordova --target [ios|android]

# this skips .app or .apk creation and just fills in /src-cordova/www
$ quasar build -m [ios|android] --skip-pkg

# passing extra parameters and/or options to
# underlying "cordova" executable:
$ quasar build -m ios -- some params --and options --here
  • 这些命令解析并构建你的 /src 文件夹,然后覆盖 /src-cordova/www,然后遵循 Cordova CLI 来触发实际的原生应用创建。

    ¥These commands parse and build your /src folder then overwrite /src-cordova/www then defer to Cordova CLI to trigger the actual native app creation.

  • 除非另有配置,否则构建的包将位于 /dist/cordova 中。

    ¥Built packages will be located in /dist/cordova unless configured otherwise.

  • 如果你希望跳过 Cordova CLI 打包步骤,仅填充 /src-cordova/www 文件夹:

    ¥If you wish to skip the Cordova CLI packaging step and only fill /src-cordova/www folder:

$ quasar build -m [ios|android] --skip-pkg
  • 如果你希望使用 IDE(Android Studio / Xcode)手动构建最终资源,而不是进行终端构建,那么:

    ¥Should you wish to manually build the final assets using the IDE (Android Studio / Xcode) instead of doing a terminal build, then:

$ quasar build -m [ios|android] --ide

警告

在 Android Studio 中,你将收到一条建议升级 Gradle 版本的消息。请勿升级 GRADLE,因为它会破坏 Cordova 项目。其他任何请求的升级也相同。

¥In Android Studio, you will be greeted with a message recommending to upgrade the Gradle version. DO NOT UPGRADE GRADLE as it will break the Cordova project. Same goes for any other requested upgrades.

Gradle upgrade

如果你遇到任何 IDE 错误,请点击“文件”>“使缓存无效”,然后重新启动。

¥If you encounter any IDE errors then click on File > Invalidate caches and restart.

Gradle upgrade

如果你想要一个启用了调试功能的正式版 UI 代码:

¥If you want a production build with debugging enabled for the UI code:

$ quasar build -m [ios|android] -d

# ..or the longer form
$ quasar build -m [ios|android] --debug

提示

另请查看 配置 Cordova 页面中的 getCordovaBuildParams()getCordovaBuildOutputFolder()(quasar.config > cordova 选项)。

¥Also check getCordovaBuildParams() and getCordovaBuildOutputFolder() (quasar.config > cordova options) from Configuring Cordova page.