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

Question

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

现在，如果我这样做并设置构建配置 assetsPublicPath 以从该文件夹提供服务，所有资产都可以正常提供，但我的应用程序无法正确路由。 "home" 页面被路由到 '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 等都可以正常使用。然而，家庭路线显示了一切。我假设这是因为我的路由设置不正确，或者因为我需要做一些事情来从生产中的子目录提供服务。

Answer 1

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

查看文档：https://router.vuejs.org/en/api/options.html#base

Answer 2

我已经能够使用 vue-route 的 base 属性解决这个问题。在示例的情况下，它看起来像这样：

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

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

www.dominio / app1
www.dominio / app2

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

Vue.js routes serving from subdirectory

javascript

vue.js

vue-router