让网络服务器像 Vue 开发服务器一样处理页面刷新/书签

Question

我正在编写一个 Vue/Nuxt 应用程序。当我使用开发服务器（“yarn dev”-> localhost:3000）时，页面刷新效果很好。我可以导航到我的应用程序中的任何页面，刷新浏览器，页面加载正常。

当我将应用程序生成到 /dist 文件夹中，然后将其作为来自常规 Web 服务器的静态页面提供时，页面刷新会导致服务器生成的 404 错误。例如，我可以去 /signin，点击忘记密码去 /forgotpassword，然后重新加载页面。在开发时工作正常，在生产中失败。

生成的应用程序有一个 /forgotpassword 目录，其中包含一个 index.html。当我直接进入 /forgotpassword/index.html 时，生产服务器会加载它。 （虽然它区分大小写，与开发服务器不同，它重定向到 /signin。我不知道为什么，但它可能与问题无关。）

另外，当我访问一个错误的 url 时，开发服务器返回一个 Vue/Nuxt 404 页面，而生产服务器返回一个服务器生成的页面。

我想让我的生产网络服务器像开发服务器一样工作。生产服务器是用 Java 编写的，我可以很好地控制它的工作方式。

那么，我需要在生产服务器中进行哪些更改才能使其正常运行？

更新 好的，所以部分答案是在子文件夹中启用欢迎文件。但是当有一个错误的 URL 时，开发服务器会以某种方式显示客户端 404 页面。这是怎么发生的？

Answer 1

如果您在History 模式下使用路由器，您应该将您的服务器设置为相应地为应用程序提供服务。您可以在 router docs 中找到 NGINX 或 APACHE 的两种配置

阿帕奇

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

对于 nginx：

nginx
location / {
  try_files $uri $uri/ /index.html;
}