仅客户端渲染的 Nuxt 3 无法加载答案

【问题标题】：Nuxt 3 with client-side only rendering doesn't load仅客户端渲染的 Nuxt 3 无法加载
【发布时间】：2022-08-20 07:52:53
【问题描述】：

我想通过 Nuxt 3 构建一个仅限客户端的应用程序，正如文档中描述的 here 我已将 ssr: false 添加到我的 nuxt 配置中。

然后我使用nuxi build 命令构建应用程序，但它仍然说它需要使用节点运行。

我继续运行nuxi generate，就像我通常对静态托管所做的那样。

根据生成命令的输出，我应该能够将公用文件夹部署到任何静态虚拟主机。但是，当我这样做时，我只会得到一个完全白的页面。

我尝试在没有ssr: false 的情况下运行相同的命令，这确实会呈现一个页面，但这会导致我的任何 javascript 都无法工作。

编辑：最小的可重现示例

所以我刚刚从 nuxt 文档中关注了these steps。

除了编辑我的 nuxt 配置之外，没有进行任何代码更改，我运行了 generate。

这就是我的 nuxt 配置现在的样子；

import { defineNuxtConfig } from \'nuxt\'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    ssr: false,
})

然后我按照 cmets 中的建议运行npx serve .output/public，这在本地似乎工作得很好。

然后我将公用文件夹复制到我的网络服务器，但同样的问题仍然存在，只是一个白屏可见。

也许我应该再澄清一下我的问题：是否仍然可以托管 nuxt SPA，而无需在服务器上运行节点进程，就像之前在 nuxt 2 中一样？

现在我刚刚切换到服务器呈现的应用程序，因为我没有看到其他解决方案。

如果您想运行 SPA，generate 就足够了。然后，您可以尝试使用npx serve .output/public 之类的内容在本地运行它。如果它在本地工作，则将其部署到 Netlify。否则，如果它不起作用，则意味着这不是构建问题，而是代码问题。因此，那时将需要一些相关的 sn-ps（甚至是minimal reproducible example）。
嗨@kissu 感谢您的快速回复！我刚刚从头开始创建了一个新的 nuxt 3 项目并在本地运行 npx serve .output/public。这实际上工作得很好，但是，当我将.output/public 文件夹复制到我的网络服务器时，我只是像以前一样看到一个白屏。现在我已经切换到服务器渲染的应用程序，它确实可以按预期工作，但我想知道是否仍然可以在不在 Web 服务器上运行节点进程的情况下部署 SPA？
对于仅 SPA 设置，您不需要 Node.js 实例。同时，您仍然需要为此使用轻量级服务器（处理安全、协议、HTTP 调用等...），您不能只在浏览器中使用file:// 协议打开它。好消息，大多数地方都免费为您提供。试着把你的文件夹放在这里app.netlify.com/drop
您使用的是什么主机，也许是 nginx 容器？
@Dav3rs 我正在使用 nginx。但是我切换到服务器端渲染并使用 nginx 创建了一个反向代理。

标签： single-page-application server-side-rendering nuxtjs3

【解决方案1】：

使用 NGINX 提供静态生成的构建当前会失败，因为 nginx 不支持 mjs 文件的 MIME 类型（作为八位字节流发送）。

要修复它，只需在 nginx 配置中添加“application/javascript”作为 mjs 文件的 mimetype。

适应您的需求的示例：

1- 在您的项目根文件夹中创建一个名为“nginx.conf”的文件，其中包含：

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    types 
    {
        application/javascript mjs;
    }
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

使用“包括 /etc/nginx/mime.types;”我们正在加载默认的 nginx mime 类型，然后使用“application/javascript mjs;”扩展该列表。

2 - 然后您可以在图像构建步骤中使用该文件，如下所示（检查第 2 行）：

FROM nginx:alpine
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY .output/public /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

现在您可以部署映像了。如果您尚未使用压缩，请启用 gzip 行。

【讨论】：