Пустая страница при обслуживании моего приложения (Vue Router 4 - Vue 3)

#javascript #vue.js #vue-router #vue-cli #vuejs3

#javascript #vue.js #vue-маршрутизатор #vue-cli #vuejs3

Вопрос:

Я первым npm run build перенес свое первое большое приложение Vue3 на тест-драйв реального сервера.

Итак, я получил файлы, загрузил их в свой VPS и удивился: сервер распознает пути маршрута только в том случае, если я перемещаюсь по кликам.

Если я случайно перезагружаю страницу или перехожу непосредственно к URL-адресу, браузер выдает ошибку. Я добавил код, упомянутый здесь: https://next.router.vuejs.org/guide/essentials/history-mode.html к моему .htaccess файлу (я использую apache на Centos 7 и использую CWP), но проблема сохраняется, единственное отличие заключается в том, что вместо выдачи ошибки она просто застревает на index.html странице, но без отображения какого-либо содержимого вообще.

Я не могу понять, что я делаю не так.

Пожалуйста, проверьте мой приведенный ниже код относительно реализации Vue Router 4.

Я определяю все в main.js файле, вот так:

 import { createRouter, createWebHistory } from "vue-router"
import Page from "./views/Page.vue"
import Content from "./views/Content.vue"
import BaseSection from "./components/BaseSection.vue"

//ROUTER
const router = createRouter({
    history: createWebHistory(),
    routes: [{
            path: "/",
            name: "Home",
            component: Page,
            meta: {
                title: 'Home'
            }
        },
        {
            path: "/docs/1.0/:title",
            component: Content,
            name: "docs"
        }
    ],
    scrollBehavior(to) {
        if (to.hash) {
            return {
                el: to.hash,
                behavior: 'smooth',
            }
        }
    }
});

app.use(router);

Есть идеи или предложения? Я схожу с ума.

Спасибо.

С уважением, Т.

1. привет. что вы видите, когда просматриваете источник пустой страницы? что происходит, когда вы нажимаете / переходите по ссылкам .js / .css оттуда?

2. Я вижу только стандартные VueJS index.html код. Когда я пытаюсь перейти по ссылкам на файлы .css, это просто приводит меня к index.html опять же, однако, адрес в адресной строке изменяется на имя маршрута, который я прошел, плюс имя файла .css (пример: /docs/1.0/css/chunk-vendors.e0a049f6.css —- где /docs/1.0/ — фактический маршрут)

3. Этот комментарий звучит так, как будто приложение обслуживается из /docs/1.0/ , а не из корня домена. Это верно?

4. Хммм. Я согласен с вашим ответом. Но дело в том, что весь контент был загружен в корень домена. Как он может предположить этот путь? Где я могу это изменить?

Ответ №1:

Ошибка пустой страницы обычно возникает при обслуживании приложения из другого места, кроме корня домена. В этом случае интерфейс командной строки Vue должен быть настроен соответствующим образом. Модификация vue.config.js в корне проекта (создайте его, если он не существует):

 module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/docs/1.0/'  // This is whatever your path from the root is
    : '/'
}

Подробнее об этом можно прочитать publicPath здесь

Убедитесь, что ваш .htaccess файл также находится в /docs/1.0/