将电容器 3 与 Nuxtjs SSR 一起使用

Question

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

那么为SSR Nuxt配置电容器的正确方法是什么？？

Answer 1

定义服务器网址

我有一个在 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;