Как изменить базовый каталог vue-маршрутизатора проекта laravel-vue при обслуживании из вложенной папки?

#vue.js #vue-router

#vue.js #vue-router

Вопрос:

Я пытаюсь запустить свой проект блога laravel vue из вложенной папки моей папки проекта. Моя база проекта http://127.0.0.1 / и там у меня есть папка с именем «blogportal». Итак, хотите увидеть мой сайт в блоге, когда собираетесь http://127.0.0.1/blogportal

Обработал каталог ресурсов laravel, добавив пользовательский ASSET_URL в .env. Но vue-router не работает. Отображение этих ошибок:

Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден) / последнее сообщение: 1 Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден) /blogpost: 1 Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден) /featuredpost: 1

Я попытался изменить базу в своих маршрутах.js, где я строю маршруты в соответствии с документацией vue. Но он все еще не работает. Вот мой routes.js

 import VueRouter from 'vue-router'

import AdminHome from './components/admin/AdminHome.vue'
import CategoryList from './components/admin/category/List.vue'
import AddCategory from './components/admin/category/New.vue'
import EditCategory from './components/admin/category/Edit.vue'

// FrontEnd Component
import PublicHome from './components/public/PublicHome.vue'
import BlogPost from './components/public/blog/BlogPost.vue'
import SinglePost from './components/public/blog/SingleBlog.vue'
import CategoryBlogs from './components/public/blog/CategoryBlogs.vue'
import TagBlogs from './components/public/blog/TagBlogs.vue'

// Post
import PostList from './components/admin/post/List.vue'
import AddPost from './components/admin/post/New.vue'
import EditPost from './components/admin/post/Edit.vue'
let routes = [
    {
        path:'/admin/home',
        component:AdminHome
    },
    {
        path:'/admin/category-list',
        component:CategoryList
    },
    {
        path:'/admin/add-category',
        component:AddCategory
    },
    {
        path:'/admin/edit-category/:categoryid',
        component:EditCategory
    },
    // Post
    {
        path:'/admin/post-list',
        component:PostList
    },
    {
        path:'/admin/add-post',
        component:AddPost
    },
    {
        path:'/admin/edit-post/:postid',
        component:EditPost
    },

    // Frontend Route
    {
        path:'/',
        component:PublicHome
    },
    {
        path:'/blog',
        component:BlogPost
    },
    {
        path:'/blog/:slug',
        component:SinglePost
    }, 
    {
        path:'/categories/:catName',
        component:CategoryBlogs,
        // props: { gotCatName: Math.random() }
    },
    {
        path:'/tags/:tagName',
        component:TagBlogs,
        // props: { gotCatName: Math.random() }
    },

];


const router = new VueRouter({
    base: '/blogportal/',
    routes,
    linkActiveClass: 'active',
    mode: 'history',
    scrollBehavior() {
        return {x: 0, y: 0}
    }
    
});

router.beforeEach((to, from, next) => {
    
    return next()
});

export default router;
  

Ответ №1:

Вы пытались добавить RewriteBase в свой .htaccess?

Смотрите пример ниже.

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

    RewriteEngine On
    
    # HERE
    RewriteBase /blogportal/

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

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