Nuxt :在‘node’上执行'appendChild‘失败:此节点类型不支持此方法

Question

我的nuxt / express应用程序托管在一个网址的子目录上：https://api.my-domain.com/my-app-homepage --应用程序的主页在这里加载/my-app-homepage。如果浏览器访问https://api.my-domain.com，他们将看到404。

当我在https://api.my-domain.com/my-app-homepage上加载我的应用程序时，我在控制台中看到以下错误：

Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:42101)
    at m (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:54987)
    at v (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:54618)
    at w (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:55073)
    at $ (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:58458)
    at $ (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:58393)
    at $ (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:58393)
    at f.__patch__ (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:58828)
    at f.t._update (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:35540)
    at f.r (https://api.my-domain.com/my-app-homepage/_nuxt/847dc77.js:2:66240)

在我的nuxt配置中，我有以下设置：

router: {
    base: process.env.NODE_ENV === 'development' ? '/my-app-homepage' : '/',
  },

 serverMiddleware: {
    '/api': '~/api',
  },


 axios: {
    // API_HOST=https://api.my-domain.com/my-app-homepage
    baseUrl: process.env.API_HOST || 'http://localhost:3000/my-app-homepage',
  },

 publicRuntimeConfig: {
    axios: {
      browserBaseURL: '/api',
    },
  },

  privateRuntimeConfig: {
    axios: {
      // API_HOST=https://api.my-domain.com/my-app-homepage
      baseURL: process.env.API_HOST || 'http://localhost:3000/my-app-homepage',
    },
  },

  build: {
    extend(config, ctx) {},
    html: {
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    },
    postcss: {
      // Add plugin names as key and arguments as value
      // Install them before as dependencies with npm or yarn
      plugins: {
        // Disable a plugin by passing false as value
        autoprefixer,
      },
    },
    // API_HOST=https://api.my-domain.com/my-app-homepage
    publicPath: process.env.API_HOST ? `${process.env.API_HOST}/_nuxt/` : '/_nuxt/',
    transpile: [/@nuxtjs[\\/]composition-api/, 'ag-grid-vue', 'vue-property-decorator'],
  },

srcDir: 'src/',
  babel: {
    presets(env, [preset, options]) {
      return [
        ['@nuxt/babel-preset-app', options],
        ['@babel/preset-typescript', options],
      ];
    },
  },

以下是页面的vue代码：

<template>
  <div class="w-full h-full text-center">
    <span class="block text-2xl m-4">Create Todos</span>
    <form action="/my-app-homepage/api/todos" enctype="multipart/form-data" method="post">
      <div class="w-max flex m-auto flex-col">
        <input type="file" accept=".csv" class="border-2 my-2" name="todos" >
        <button class="border-2 w-min px-2 py-1 rounded-md bg-purple-500" type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api';

export default defineComponent({
  name: 'Todo',
  setup() {

    return {};
  },
});
</script>

我真的被这个错误弄糊涂了。我看过这里、这里和这里 --有谁知道我为什么会看到这个错误，以及如何修复它？

我使用Nuxt 2.15.7，Node 14.15.4，快递4.16.3

服务器以开发模式登录

  ╭─────────────────────────────────────────────────────────────────────╮
   │                                                                     │
   │   Nuxt @ v2.15.8                                                    │
   │                                                                     │
   │   ▸ Environment: development                                        │
   │   ▸ Rendering:   server-side                                        │
   │   ▸ Target:      server                                             │
   │                                                                     │
   │   Listening: http://localhost:3000/my-app-homepage/                   │
   │                                                                     │
   │   Tailwind Viewer: http://localhost:3000/my-app-homepage/_tailwind/   │
   │                                                                     │
   ╰─────────────────────────────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                                                 11:22:53
ℹ Initial build may take a while                                                                                                                                                                                                                    11:22:53
ℹ Discovered Components: build/components/readme.md                                                                                                                                                                                                 11:22:53
✔ Builder initialized                                                                                                                                                                                                                               11:22:53
✔ Nuxt files generated                                                                                                                                                                                                                              11:22:53

✔ Client
  Compiled successfully in 14.05s

✔ Server
  Compiled successfully in 13.30s

ℹ Waiting for file changes                                                                                                                                                                                                                          11:23:08
ℹ Memory usage: 714 MB (RSS: 949 MB)                                                                                                                                                                                                                11:23:08
ℹ Listening on: http://localhost:3000/my-app-homepage/                                                                                                                                                                                                11:23:08
No issues found.                                                                                                                                                                                                                                    11:23:08
ℹ [Development] Redirecting from /favicon.ico to /upc-converter/favicon.ico (router.base specified)                                                                                                                                                 11:23:23
ℹ [Development] Redirecting from /favicon.ico to /upc-converter/favicon.ico (router.base specified)

这些是铬控制台中的日志：

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.common.dev.js?4650:9104 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

Answer 1

这里的错误对我的设置来说更加模糊和独特，因此很难继续下去。

问题是在生产过程中，我希望URL是这样的：https://api.my-domain.com/my-app-homepage。然而，我的NGINX代理为我的应用程序提供了这个https://api.my-domain.com/my-app-homepage/my-app-homepage的URL。

服务器端呈现(SSR)应用程序预期其主页URL为https://api.my-domain.com/my-app-homepage，这与NGINX重写请求的URL (https://api.my-domain.com/my-app-homepage/my-app-homepage)相矛盾。由于服务器端呈现的标记所期望的URL与客户机实际可用的URL不同，因此出现了水合错误。

简而言之，客户端代码和服务器端代码不匹配，因此出现了水合错误。

浏览器可以访问我在https://api.my-domain.com/my-app-homepage的应用程序。然而，当这种情况发生时，NGINX会重写到https://api.my-domain.com/my-app-homepage/my-app-homepage的路径--这个在浏览器上使用加倍路径的URL与我的https://api.my-domain.com/my-app-homepage应用程序所期望的URL发生了冲突。