【发布时间】：2022-07-21 20:08:36
【问题描述】：
我对在 S3 中托管静态 Nuxt Web 应用程序有一些一般性问题，我希望这不是含糊的，我只是觉得我缺乏一些理解。
我的设置：
我有一个使用 Mapbox 的 Nuxt 应用程序。主要是为了避免成本和维护，我希望这是一个托管在 S3 中的静态网站，使用 Cloudfront 作为 CDN。如果我在本地运行（yarn dev），该应用程序运行良好，当我在本地生成和启动时它运行良好（nuxt generate && nuxt start）。但是，nuxt start 运行本地服务器，据我了解，这与静态网站相反。问题是，如果我只是转到主文件index.html，则不会加载带有 mapbox 的组件。而且，据我所知，当网站托管时，我将输入一个直接链接到同一个 index.html 文件的 URL，这样做也会遇到同样的问题。
其他带有引导元素的组件在单击时也不会做出反应。
潜在原因
这是我需要帮助的地方。
我认为一个潜在的原因是与进口有关。我在组件中导入“mapbox-gl”，我认为这意味着导入发生在运行时，当简单地打开index.html 文件时，它永远不会完成。我需要为此在 nuxt.config.js 中做些什么吗？我想过在插件文件中导入mapbox，但这似乎不是插件的使用。但我需要做点什么
让我感到困惑的另一件事是nuxt start 的角色。这是在本地复制 Cloudfront 的角色吗？如果是这样，我需要向 Cloudfront 添加什么配置才能使其正常工作？
我将nuxt generate 理解为编译 Javascript 并将其分解为几个要导入主 html 文件的 .js 文件，但是当我打开 index.html 文件时，我在尝试加载这些文件时遇到了一些未找到的错误。
我将尝试总结一个问题：打开 index.html 与静态网站进行交互显然是不对的，那么我还打算做什么来让所有功能在 S3 和 Cloudfront 中工作？
-
如今，您需要运行一个快速简单的 HTTP 服务器才能拥有一个正常工作的静态网站，否则您会遇到有关 HTTP 调用、访问某些资产等方面的问题。因此，它不是付费的 Node.js 服务器，并且所有平台都提供了一种免费的方式（Netlify、Vercel、Digitalocean 等）。 S3也可能有一种方法。您是否查看过有关部署的 Nuxt 文档？
标签： nuxt.js amazon-cloudfront mapbox-gl static-web-apps