再次访问网址后，Vue页面返回404

编程问答 2022-06-12

问题描述

我正在使用hostinger作为托管服务器，并且已经通过运行命令“ npm run build”将项目发布到了hostinger中。然后，我将dist拖入域的文件管理中。它工作正常，但是只要我导航到第二页，例如www.example.com/page。然后，当我通过Ctrl + R刷新页面时。它将返回404页面，如下图所示。

Error 404 page

我找到了一些解决方案，但是我不知道如何将其应用于我的项目。诸如https://router.vuejs.org/en/essentials/history-mode.html

之类的链接

由于我不知道如何处理Web框架或Web服务器级别。

下面是项目路由器index.js的代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import firebase from "firebase";

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',name: 'Home',component: () => import('../views/Home.vue'),},{
    path: '/page',name: 'page',component: () => import('../views/page.vue'),}
]

const router = new VueRouter({
  mode: 'history',base: process.env.BASE_URL,routes,scrollBehavior() {
    document.getElementById('app').scrollIntoView();
}
});

这是top_nav.vue代码

<router-link to="/page"><li>Page</li></router-link> 
<router-link to="/"><li>Home</li></router-link>

.htaccess 

<IfModule FallbackResource.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    RewriteRule ^index\.html$ - [L]
    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
     RewriteRule . index.html [L]
</IfModule>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

deploymenthostrouterroutervue.js