Nuxt 中的 <client-only> 使运行生成时内容消失答案

【问题标题】：<client-only> in Nuxt makes content disappear when running generateNuxt 中的 <client-only> 使运行生成时内容消失
【发布时间】：2021-04-29 21:45:58
【问题描述】：

有人知道为什么会这样吗？如果我在本地（服务器）运行 nuxt，它可以正常工作，但是每当我运行 yarn generate 并在浏览器中加载 index.html 文件时，<client-only> 标签之间的所有内容都会消失。

我的 nuxt 配置文件：

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: true,

  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Site name',
    htmlAttrs: {
      lang: 'nl'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Description
    ],

    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'preconnect', href: "https://fonts.gstatic.com"},
      { href: 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Open+Sans+Condensed:wght@700&display=swap', rel: 'stylesheet'}
    ],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["@/assets/css/hamburgers.scss"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
    '@nuxtjs/fontawesome',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  styleResources: {
    scss: [
      "assets/css/variables.scss",
      "assets/css/hamburgers.scss",
    ]
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

【问题讨论】：

index.html 的代码在 IMO 中很有用。另外，minimal reproducible example 对我有很大帮助。
你能在codesandbox或Github上托管minimal reproducible example吗？
@kissu 不再需要，解决方案非常简单。仅客户端不起作用，因为 javascript 已损坏，因为从我的电脑上的文件夹访问文件时，文件的路径在 index.html 中不起作用

标签： static nuxt.js

【解决方案1】：

好的，我已经开始工作了。

Javascript 无法正常工作，因为我打开 index.html 时文件未正确链接。

因为 index.html 位于我电脑某处的本地文件夹中，它会在机器的根目录（它们不存在）上搜索 javascript 文件。

我在使用 XAMPP 的 Apache 服务器上进行了本地测试，当我将 yarn generate 生成的 dist 内容放在子文件夹中时出现了同样的问题，因此 URL 将是 localhost/subfolder。

在这种情况下解决这个特定问题的方法是添加到nuxt.config.js this:

router: {
  base: '/subfolder/'
},

最后，这个解决方案对我来说不是必需的，因为当我将它托管在一个实际的 Apache 服务器上并将文件放在根目录中时，那么除非我将它放入，否则不需要 router 属性在子文件夹中。

Href and src generated by Nuxt in static site are not properly linked to js files after nuxt generate

【讨论】：

您通常应该在 dev 或 prod 中使用 webpack 服务器运行您的服务器，而不是直接打开您的文件。与 Rails 一样。