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

Question

我正在尝试从我的项目文件夹的子文件夹中运行我的laravel vue blog项目。我的项目库是http://127.0.0.1/，在那里我有一个名为'blogportal‘的文件夹。所以我想在去http://127.0.0.1/blogportal的时候看看我的博客网站

通过在.env中添加自定义ASSET_URL来处理laravel的资源目录。但是vue路由器不工作。显示以下错误：

加载资源失败:服务器响应状态为404 (未找到) /latestpost:1加载资源失败:服务器响应状态为404 (未找到) /blogpost:1加载资源失败:服务器响应状态为404 (未找到) /featuredpost: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

你有没有试过在你的.htaccess中添加RewriteBase？

请参见下面的示例。

​

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

​