我想为我的Vue服务.从临时服务器上的子目录下载js应用程序.例如:http://url.com/subdir/app/

现在,如果我这样做,并设置build config AssetPublicPath以从该文件夹提供服务,则所有assets资源 都可以正常提供,但我的应用程序无法正确路由."主页"被路由到"全面覆盖",任何进一步的路由都只显示正常的白色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
            }
        ]
    }
]})

下面是必要的配置/索引.js变化:assetsPublicPath: '/subdir/app/'

在当地的开发中,这些路由运行良好.但是在临时服务器上,所有静态assets资源 、构建的JS和CSS等都可以正常工作.然而,回家的路由说明了一切.我认为这是因为我的路由设置不正确,或者是因为我需要做一些事情来从生产中的子目录提供服务.

推荐答案

assetsPublicPath配置仅适用于网页包assets资源 .对于vue路由,需要在构造函数中设置base选项.

见docs:https://router.vuejs.org/en/api/options.html#base

Vue.js相关问答推荐

如何在 Vuetify 2 中的轮播项目上放置 href 属性?

在 Nuxt3 中使用 Vue3 vue-ganntastic 插件

是否可以使用 Vuetify/VueJS 为轮播设置默认图像而不是第一个图像?

使用 vue / nuxt js 切换 fontawesome 图标

Nuxt 2.15.7 的构建错误 - 无法解析 CSS @font-face URL

在 Ajax 函数中访问 Vue.js 组件属性

Vue:在表格中显示嵌套数据

Vue + Webpack 构建显示空白页面

在 Vue.js 中动态挂载单个文件组件

使用 aria-live 在 vue.js 中向屏幕阅读器宣布信息

Polyfill for ie

ECMA6 中 nameFunction() {} 和 nameFunction () => {} 的区别

Amazon EC2 错误:监听 EACCES 0.0.0.0:80

错误:vue-loader 要求 @vue/compiler-sfc 存在于依赖树中

为什么 vue 文档说 refs 不是响应式的,而实际上它们是响应式的

使用 vue-router 的默认子路由

为 Vue 组件动态添加属性

单击时交换组件

Apollo 客户端在向服务器发送Mutations 时返回400(错误请求)错误

在 Vue 中使用事件修饰符 .prevent 提交表单而不进行重定向