Vue.js从子目录提供的路由

jqjz2hbq  于 2023-03-03  发布在  Vue.js
关注(0)|答案(3)|浏览(129)

我希望从临时服务器上的子目录提供Vue.js应用。例如:http://url.com/subdir/app/
现在,如果我这样做,并设置构建配置assetsPublicPath从该文件夹提供服务,所有的资产都很好地提供服务,但我的应用没有得到正确的路由。“主页”被路由到“catch-all”,任何进一步的路由只显示正常的白页404。
这是我的路由器:

export default new Router({
    mode: 'history',
    routes: [
    {
        path: '/',
        component: ContentView,
        children: [
            {
                path: '/',
                name: 'DataTable',
                component: DataTable,
                meta: { requiresAuth: true }
            },

            // ===================================
            //  Login
            // ===================================
            {
                path: '/login',
                name: 'AppLogin',
                component: AppLogin,
                meta: { checkAlreadyLoggedIn: true }
            },
            {
                path: '/logout',
                name: 'AppLogout',
                component: AppLogout,
                meta: { requiresAuth: true }
            }
        ]
    },
    {
        path: '*',
        component: ContentView,
        children: [
            {
                path: '/',
                name: 'NotFound',
                component: NotFound
            }
        ]
    }
]})

下面是必要的config/index.js更改:assetsPublicPath: '/subdir/app/'
在本地开发中,路由工作正常。但是在临时服务器上,所有静态资产、构建的JS和CSS等都工作正常。然而,主路由显示了所有内容。我假设这是因为我的路由设置不正确,或者因为我需要做一些事情来从生产中的子目录提供服务。

jgovgodb

jgovgodb1#

assetsPublicPath配置只用于webpack资产,对于vue-router,您需要在构造函数中设置base选项。
参见文档:https://router.vuejs.org/en/api/options.html#base

1wnzp6jl

1wnzp6jl2#

我已经能够使用vue-routebase属性来解决这个问题,在示例中,它看起来像这样:

export default new Router({
    mode: 'history',
    base: '/subdir/app/',
    routes: [
    {
        path: '/',
        component: ContentView,
        children: [

我现在的问题是如何动态地创建这个子目录。想象一个服务器,两个不同的url指向这个服务器。

www.dominio / app1
www.dominio / app2
mbzjlibv

mbzjlibv3#

package.json文件中,将homepage属性设置为".",您的文件将相对于index.html提供

"homepage": ".",

npm run build命令使用此属性来确保生产构建指向正确的位置。

相关问题