#vue.js #deployment #vue-router #router #host
#vue.js #развертывание #vue-маршрутизатор #маршрутизатор #хост
Вопрос:
Я использую hostinger в качестве хостингового сервера и опубликовал проект в hostinger, выполнив команду «npm run build». Затем я перетащил dist в управление файлами для домена. Он работает нормально, но всякий раз, когда я перехожу на вторую страницу, например www.example.com/page . Затем, когда я обновляю страницу с помощью Ctrl R. Он возвращает страницу 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
.