从子目录服务的Vue.js路由 [英] Vue.js routes serving from subdirectory

问题描述

我想从登台服务器上的子目录中提供我的Vue.js应用程序。例如： http://url.com/subdir/app/

I would like to serve my Vue.js app from a subdirectory on a staging server. For example: http://url.com/subdir/app/

现在，如果我这样做并设置build config assetsPublicPath从该文件夹提供服务，所有资产都可以正常运行，但我的应用程序无法正确路由。 home页面被路由到'catch-all'，而任何其他路由只显示正常的白页404.

Right now if I do this and set up the build config assetsPublicPath to serve from that folder, all the assets are served fine but my app does not get routed correctly. The "home" page gets routed to the 'catch-all', and any further routes simply show the normal white-page 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 /'

And here is the necessary config/index.js changes: assetsPublicPath: '/subdir/app/'

在本地开发中，路线运行良好。但是在登台服务器上所有静态资产，内置的JS和CSS等都可以正常运行。然而，本土路线显示了全部。我假设它是因为我的路由设置不正确，或者因为我需要在生产中的子目录中做一些事情。

In local development the routes work fine. But on the staging server all static assets, the built JS and CSS etc all serve fine. However the home route shows the catch-all. I am assuming it's because my routes are not set up correctly, or because I need to do something to serve from a subdirectory in production.

推荐答案

assetsPublicPath config仅适用于webpack资产。对于vue-router，您需要在构造函数中设置 base 选项。

The assetsPublicPath config is just for webpack assets. For vue-router, you need to set the base option in the constructor.

请参阅docs： https://router.vuejs.org/en/api/options.html#base

这篇关于从子目录服务的Vue.js路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！