从子文件夹提供服务时如何更改 laravel-vue 项目 vue-router 基本目录？

Question

我正在尝试从我的项目文件夹的子文件夹中运行我的 laravel vue 博客项目。我的项目基础是http://127.0.0.1/ and there I have a folder named 'blogportal'. So want to see my blog site when going to http://127.0.0.1/blogportal

通过在 .env 中添加自定义 ASSET_URL 来处理 laravel 的资源目录。但是 vue-router 不工作。显示这些错误：

加载资源失败：服务器返回状态 404（未找到） /最新帖子：1 加载资源失败：服务器响应状态为 404（未找到） /博文:1 加载资源失败：服务器响应状态为 404（未找到） /特色帖子:1

我尝试更改 routes.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;

Answer 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>

从子文件夹提供服务时如何更改 laravel-vue 项目 vue-router 基本目录？

How to change a laravel-vue project's vue-router's base directory when serving from a subfolder?

vue.js

vue-router