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

Question

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

它工作正常，直到我刷新或尝试通过输入网址访问特定路线。请注意，如果我通过单击相关链接或按钮访问这些路线，则这些路线有效。

我在另一篇文章中看到有人遇到了类似的问题，但他使用 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

希望您能帮助我，谢谢！

Answer 1

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

如果您的 Apache 版本高于 2.2，您可以在 apache 配置中使用后备资源而不是 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>