使用 Vue 和 Apache 重新加载或直接 URL 时出现错误 404答案

【问题标题】：Error 404 on reload or direct URL with Vue and Apache使用 Vue 和 Apache 重新加载或直接 URL 时出现错误 404
【发布时间】：2019-09-22 11:09:15
【问题描述】：

我正在使用 Vue CLI 做一个网络，它在 localhost 中可以正常工作。现在我通过使用npm run build 命令在本地编译并将“dist”文件夹中的文件上传到服务器的“htdocs”文件夹中，将其部署到 Azure 中的 Apache 服务器。

在我刷新或尝试通过键入 url 访问特定路由之前，它可以正常工作。请注意，如果我通过单击相关链接或按钮访问这些路线，则这些路线有效。

我在另一篇文章中看到有人遇到了类似的问题，但他使用 Nuxt.js 进行编译，显然问题仅在于动态 URL，我的甚至是静态 URL。

这是显示的消息：

Object not localized!
The requested URL has not been located on this server. If you have entered the URL manually, please check your spelling and try again.

If you believe that this is a server error, please communicate it to the portal administrator.

Error 404
my-test-server-url.com
Apache / 2.4.28 (Unix) OpenSSL / 1.0.2l PHP / 7.1.10 mod_perl / 2.0.8-dev Perl / v5.16.3

希望你能帮助我，谢谢！

【问题讨论】：

您的路由器配置是什么样的？您需要在 router 上启用历史模式。您还需要更改服务器端配置才能使其正常工作router.vuejs.org/guide/essentials/…
@MattOestreich 谢谢！我启用了历史模式，但没有添加 .htaccess。这个链接很有帮助

标签： vue.js

【解决方案1】：

这是由于您的 vue 路由器上的历史推送模式。 https://router.vuejs.org/guide/essentials/history-mode.html

如果您的 Apache 版本高于 2.2，您可以在 apache 配置中使用 Fallback ressource 而不是 mod_rewrite。它对我有用。

在/etc/apache2/apache2.conf

<VirtualHost *:80>
    ServerName YourServerName(like yourwebsite.com)
    DocumentRoot /var/www/yourAppLocation/dist
    <Directory "/var/www/yourAppLocation/dist">
        FallbackResource /index.html
    </Directory>
</VirtualHost>

或者你可以使用经典的 mod_rewrite

<VirtualHost *:80>
    ServerName YourServerName(like yourwebsite.com)
    DocumentRoot /var/www/yourAppLocation/dist
    <Directory "/var/www/yourAppLocation/dist">
        <IfModule mod_rewrite.c>
           RewriteEngine On
           RewriteBase /
           RewriteRule ^index\.html$ - [L]
           RewriteCond %{REQUEST_FILENAME} !-f
           RewriteCond %{REQUEST_FILENAME} !-d
           RewriteRule . /index.html [L]
        </IfModule>
    </Directory>
</VirtualHost>

【讨论】：