我希望从临时服务器上的子目录提供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等都工作正常。然而,主路由显示了所有内容。我假设这是因为我的路由设置不正确,或者因为我需要做一些事情来从生产中的子目录提供服务。
3条答案
按热度按时间jgovgodb1#
assetsPublicPath
配置只用于webpack资产,对于vue-router,您需要在构造函数中设置base
选项。参见文档:https://router.vuejs.org/en/api/options.html#base
1wnzp6jl2#
我已经能够使用
vue-route
的base
属性来解决这个问题,在示例中,它看起来像这样:我现在的问题是如何动态地创建这个子目录。想象一个服务器,两个不同的url指向这个服务器。
mbzjlibv3#
在
package.json
文件中,将homepage
属性设置为"."
,您的文件将相对于index.html
提供npm run build命令使用此属性来确保生产构建指向正确的位置。