页面刷新返回已部署的VUEJS VUE-ROUTER APLLICATION上的404错误

发布于 01-23 15:03 字数 208 浏览 2 评论 0原文

该应用程序的首页/基本URL可以刷新而没有任何问题。但是其他页面返回页面刷新404。请为此做任何工作吗?

这是404的屏幕截图。 [1]: https://i.sstatic.net/lc8xd.png

The homepage/base url of the app can be refreshed with no issues. but other pages return 404 on page refresh. Please are there any work around for this?

Here is a screenshot of the 404.
[1]: https://i.sstatic.net/lc8xD.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

情栀口红2025-01-30 15:03:04

之所以发生,是因为VUE路由仅在前端侧。因此,当您刷新页面时,它将进入后端服务器。它检查是否满足请求的任何文件。

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

It happens because Vue routing is only on the frontend side. So when you refresh the page it goes backend server. And it checks for any files to satisfy the request.

To solve this issue. You have to tell your apache webserver to handle it for your front end Vue app.

撩动你心2025-01-30 15:03:04

对我有用的解决方案:

in /etc/apache2/stites-vailable/``yourappdomain''.conf 添加到结尾:

hallbackResource /index.html < /b>
&lt;/virtualHost&gt;


The solution that worked for me:

In /etc/apache2/sites-available/"yourAppDomain".conf add to the end:

FallbackResource /index.html
</VirtualHost>

简单气质女生网名2025-01-30 15:03:04

尝试将其添加到您的.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>

Try adding this to your .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>
过去的过去2025-01-30 15:03:04

页面刷新返回404错误vuejs(模式:历史记录),带有laravel:

适用于 laravel 的解决方案:

假设您的入口点是索引方法,您只需要在路由的底部添加此路线/web.php文件。

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

Page refresh returns 404 error VueJs (mode:history) with Laravel:

The solution that worked for Laravel:

Assuming your entry point is the index method, you just need to add this route at the bottom of your routes/web.php file.

Route::get('{any}', function () {
    return view('welcome');
})->where('any','.*');
风启觞2025-01-30 15:03:04

我找到了对我和路由器也有效的解决方案:)

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>

然后在主应用程序中。

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'))
}

I found solution which works for me and router works too :)

IIS setup rewrite rule:

<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>

And then in the main App.vue add this

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'))
}
独守阴晴ぅ圆缺2025-01-30 15:03:04

使用nginx设置服务器为VUE路由器历史模式
https://router.vuejs.org/guide/essentials/history- mode.html#nginx

with nginx set your server for vue router history mode
https://router.vuejs.org/guide/essentials/history-mode.html#nginx

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文