将 Capacitor 3 与 Nuxtjs SSR 结合使用

Question

我正在使用 Nuxtjs 2.15.4 ssr 模式，我想将 Capacitorjs 3 添加到我的项目中。当我阅读文档时，我发现对于 webDir 我们应该添加 dist 由 npm run generate 创建的目录，该目录用于静态模式 target: static 而不是 npm run build （对于 ssr 应用程序）。

那么SSR Nuxt配置Capacitor的正确方法是什么？

Answer 1

定义一个服务器url

我有一个 SSR 模式的 Nuxt 应用程序，带有 CapacitorJS。最终在相关步骤之后，它在我的 Android Studio 模拟器和我的物理 Pixel 2（手动 apk 安装）中成功运行。我尚未在生产环境或 iOS XCode.

中进行全面测试

定义服务器 URL 是个窍门。最初我和其他人一样与 webdir 搏斗，尽管如果使用 server: {url: } 属性.

似乎不需要这样做

capacitor.config.json:

{
    "appId": "io.mysillyapp.app",
    "appName": "My Silly App",
    "server": {
        "url": "https://mysillyapp.myapphosting.io"
    },
    "linuxAndroidStudioPath": "/snap/bin/android-studio"
}

可以选择换行，像这样 (link):

{
  ...
  server: process.env.HOST ? { url: `${process.env.HOST}:${process.env.PORT ?? 8100 }` : undefined
  ...
}

运行npx cap copy后，你会看到一个警告：

 Web asset directory specified by webDir does not exist. This is not an error because server.url is set in config.

如果你关心这个警告并且认为你需要它，那么定义webDir；我让它指向 .nuxt:

{
    ...
    "webDir": ".nuxt",
    ...
}

备注：

Capacitor docs for server url 说 “这不适用于生产” 没有额外的解释。这是什么意思，我不知道。我的第一个想法是他们在这里保守，假设 Apple 可能不喜欢在应用程序提交中这样做（从高层次上讲，Apple 想要真正的应用程序，而不是网站包装的应用程序）。

然而，一位评论者似乎是successfully using server url in production，已通过应用商店提交。

https://capacitorjs.com/docs/v3/config

  /**
     * Load an external URL in the Web View.
     *
     * This is intended for use with live-reload servers.
     *
     * **This is not intended for use in production.**
     *
     * @since 1.0.0
     */
    url?: string;

将 Capacitor 3 与 Nuxtjs SSR 结合使用

Using Capacitor 3 with Nuxtjs SSR

nuxt.js

capacitor

定义一个服务器url