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/

现在，如果我这样做并设置构建配置 assetsPublicPath 以从该文件夹提供服务，所有资产都可以正常提供，但我的应用程序没有正确路由.主页"页面被路由到包罗万象"，任何进一步的路由只会显示正常的白页 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 配置仅适用于 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.

参见文档:https://router.vuejs.org/en/api/options.html#base

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