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

时间:2019-05-03 22:12:57

标签: vue.js

我正在使用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

希望您能帮助我,谢谢!

1 个答案:

答案 0 :(得分: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>