托管 npm run build (Nuxt) 并将其放在托管上显示文件夹列表

我正在使用 VueJS 和 Nuxt 来建立自己的网站。我遇到了一个新问题。

当我运行 npm run build 然后 npm run start 一切正常。一切都已加载并准备就绪。每个人在运行 /dist 时都会得到一个 npm run build 文件夹，但我没有。如果 npm run start 没有它也能正常工作，我想我不需要它。

刚刚检查我的项目中没有 index.html，但是 npm run start 是如何工作的？

当我将构建的网站上传到我的 Bluehost 时。它只显示文件夹列表，而不显示正在运行的网站。我应该从 bluehost npm run start 吗？我不知道接下来要做什么。图片如下。

npm run generate 是上传网站的唯一正常方式吗？

首先.. npm run start/build/dev 等只是在脚本部分下的 package.json 中指定的 NPM 脚本。它们可以是任何东西，但根据 Nuxt 文档，这是默认设置：

  "scripts": {
    "dev": "nuxt","build": "nuxt build","generate": "nuxt generate","start": "nuxt start"
  }

这就是您在执行这些操作时实际运行的内容。

也就是说，我认为您感到困惑的地方在于有两种方式可以托管这些项目。作为服务器，或作为静态站点。

当您在本地运行它时，您将它作为服务器运行，这就是为什么您可以在浏览器中浏览到 localhost 并查看您在做什么，这就是为什么没有 index.html。

这样做很好，然后静态托管它。这就是构建部分的用武之地。通常 webpack 将所有内容编译成一堆普通的 html 和其他任何浏览器都可以读取的资产（不需要主动提供它们（就像你的开发服务器在本地所做的那样）。>

试试：在你的 nuxt.config.js 中设置目标：'static'

export default {
  target: 'static' // default is 'server'
}

然后运行你的：（实际上是运行nuxt generate）

npm run generate

另一种选择是将内容作为运行服务器在线托管，您可以在 Heroku 或 Digital Ocean 或 AWS 之类的托管上进行。本地开发服务器是，但在线。但经常静态托管是可以的。

希望对这种情况有所了解。如果您仍然遇到问题，请发表评论。

TLDR：generate 和 build 都很好，但它们针对不同的结果。
您需要分别设置 target: static 或 target: server 才能使其工作。

这是一个很好的答案，可以解释构建应用程序的一些差异和各种方法（npm run build 与 npm run generate）：https://stackoverflow.com/a/63638062/8816585

Here 是一篇关于 target: static 好处的官方文章。

如果可以的话，我也建议完全静态化。它会更便宜，并且可以轻松地与 CDN 一起提供服务（如在 Netlify 上），因此性能更高，故障点更少。

当然，也有一些例外。如果您的应用程序受密码保护并包含大量私人内容，您可能会发现静态构建没有任何好处。如果可以显示内容并且您提前知道它会是什么（如博客），那么请保持静态！

PS：您没有看到任何 /dist 目录，可能是因为它在您的 .gitignore 中被忽略了（生成 Nuxt 项目时的默认设置）。

文档中的相关页面：