Vue.js 路由从子目录提供服务

Posted

技术标签:

【中文标题】Vue.js 路由从子目录提供服务【英文标题】:Vue.js routes serving from subdirectory 【发布时间】:2017-10-10 15:08:00 【问题描述】:

我想从临时服务器上的子目录中提供我的 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 等都可以正常工作。然而,主场路线显示了包罗万象。我假设这是因为我的路线设置不正确,或者因为我需要做一些事情来从生产中的子目录提供服务。

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

谢谢!我检查了环境并根据它设置了基础:base: process.env.environment === 'development' ? '/' : '/subdir/app/' 那么,为什么不举一个他应该做什么的工作示例呢?只有一些神秘的文件? :S 还是 +1 另外,需要配置 "publicPath" webpack 参数 我还没有看到有人提供这个问题的工作样本。我这周遇到了这个问题。那个基本选项只能让你部分地在那里..到目前为止我还没有看到这个在线的工作样本。 我认为使用offy vue-cli docs中描述的 vue.config.js 文件是一个更好的选择【参考方案2】:

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

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

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

www.dominio / app1
www.dominio / app2

【讨论】:

您是否已经得到任何提示?我还需要动态多个子文件夹,但只使用同一个 vue.js dist 构建。谢谢 我通过参数接收基本 url:base: (req.getResponseHeader('root-base') == null ? '/' : req.getResponseHeader('root-base')) + ' p' 对不起 - 更复杂的路由问题的新手,很抱歉,如果这被涵盖。使用 base 工作得很好,但是直接点击路由甚至刷新不是根(或 base)的路由路径上的浏览器会导致 404。我猜这是因为应用程序最初不会加载,除非根首先被击中。是否有任何变通方法或是否需要在 Web 服务器上应用重写/重定向规则?

以上是关于Vue.js 路由从子目录提供服务的主要内容,如果未能解决你的问题,请参考以下文章

01.《Vue.js》charp-01

nuxt实践

如何配置 laravel-websockets 包以使用从子目录提供的 Laravel 应用程序,即 https://laravel-apps.test/app1?

vue-router

我可以在sails.js 资产目录中轻松运行vue.js webapp 吗?

使用 Vue.js 将信息从子组件传递到父组件