部署的 vuejs vue-router 应用程序上页面刷新返回 404 错误

Question

应用程序的主页/基本网址可以毫无问题地刷新。但其他页面在页面刷新时返回 404。请问有什么解决办法吗？

这是 404 的屏幕截图。 [1]：

Answer 1

发生这种情况是因为 Vue 路由仅在前端。因此，当您刷新页面时，它会转到后端服务器。它会检查是否有任何文件来满足请求。

解决这个问题。您必须告诉您的 apache Web 服务器为您的前端 Vue 应用程序处理它。

Answer 2

对我有用的解决方案：

在 /etc/apache2/sites-available/"yourAppDomain".conf 添加到末尾：

后备资源/index.html

</VirtualHost>

Answer 3

尝试将其添加到您的

.htaccess

：

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

Answer 4

页面刷新返回 404 错误 VueJs (mode:history) 和 Laravel:

适用于 Laravel 的解决方案：

假设您的入口点是index方法，您只需将此路由添加到routes/web.php文件的底部即可。

Route::get('{any}', function () {
    return view('welcome');
})->where('any','.*');

Answer 5

我找到了适合我的解决方案，路由器也适用:)

IIS 设置重写规则：

<rule name="MY SPA APP REWRITE RULE" stopProcessing="true">
    <match url="myAppBaseURL/(.*)" />
    <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    </conditions>
    <action type="Rewrite" url="/myAppBaseURL?rewriteURL={R:1}" />
</rule>

然后在主App.vue中添加这个

import { useRouter } from 'vue-router'
const router = useRouter()

if(new URLSearchParams(window.location.search).get('rewriteURL')){
  router.push(new URLSearchParams(window.location.search).get('rewriteURL'))
}