Страница Vue возвращает 404 после повторного просмотра URL-адреса

#vue.js #deployment #vue-router #router #host

#vue.js #развертывание #vue-маршрутизатор #маршрутизатор #хост

Вопрос:

Я использую hostinger в качестве хостингового сервера и опубликовал проект в hostinger, выполнив команду «npm run build». Затем я перетащил dist в управление файлами для домена. Он работает нормально, но всякий раз, когда я перехожу на вторую страницу, например www.example.com/page . Затем, когда я обновляю страницу с помощью Ctrl R. Он возвращает страницу 404, такую как изображение ниже.

Ошибка страницы 404

Я нашел какое-то решение, но я не знаю, как применить его к моему проекту. Ссылка, такая как https://router.vuejs.org/en/essentials/history-mode.html

Поскольку я не знаю, как обращаться с моей веб-платформой или уровнем веб-сервера.

Ниже приведены коды для маршрутизатора проекта 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>
  

Комментарии:

1. Я не могу найти следующее в определении вашего маршрутизатора. mode: "history" Действительно ли он работает в режиме истории?

2. Извините, я только что обновил новый 1, и он отображается под постоянным маршрутизатором

3. Когда у меня был такой же опыт, я перешел по URL-адресу ниже. router.vuejs.org/en/essentials/history-mode.html Но это было возможно, потому что я знал, что такое веб-сервер. Узнайте, использует ли Hostinger Apache или Nginx. hostinger.com/how-to/do-you-use-nginx-on-your-servers

4. Большое вам спасибо, Како-джун! Я обнаружил, что hostinger использует оба, и поэтому я просто использую Apache, который устанавливает его в свой проект, и теперь в моем проекте есть 1 папка с именем «Blog», затем я увидел .htaccess, поэтому я копирую и вставляю из router.vuejs.org/en/essentials/history-mode.html тогда я думаю, что это должно сработать, но нет. Нужно ли что-нибудь добавить перед развертыванием.

5. В моем случае это был Nginx, поэтому я мало что знаю об Apache. Я никогда не использовал Hostinger. Включен ли .htaccess? Пожалуйста, погуглите AllowOverride .