带有不受 Vue Router 影响的文件夹的 Vue JS Cli 项目

Question

我已经构建了一个 Vue Cli 应用程序，它将替换顶级域中的当前静态站点。

但是，它正在替换的当前站点需要在子文件夹中保持活动（和工作）。理想情况下，当导航到这个子文件夹站点时，我希望完全隔离并独立于 Vue。

在正常情况下，我可能可以使用/static 文件夹，但对于这个任务我不能。这两个项目不能以这种方式混合在一起。

理想场景：

• https://example.com（Vue Cli 项目）
• https://example.com/my-page/ （Vue Cli 项目）
• https://example.com/another-page/ (Vue Cli 项目）
• https://example.com/old-site/（遗留静态项目）
• https://example.com/old-site/my-page/（遗留静态项目）

这可能吗？目前，如果我这样做，Vue Router 会给我一个 404，因为我的路由是在顶层设置的（通配符路由）：

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'AppHome',
      component: AppHome
    },
    {
      path: '*',
      name: 'AppError',
      component: AppError
    }
  ]
})

我只是想允许链接到服务器上的子文件夹，而不涉及 Vue Cli/路由器。

帮助非常感谢。谢谢。

Answer 1

您可能已将网络服务器设置为将每个请求路由到 https://example.com/* 到 https://example.com。这对于让 vue 路由器处理路由而不必在每个 url (https://example.com/#/my-page) 中放置主题标签是必要的。

为了让您的网络服务器在您向https://example.com/old-site 发出请求时返回旧站点，您必须配置您的网络服务器，使其返回该文件夹，而不是像您对其他所有请求一样提供https://example.com。你如何做到这一点取决于你使用的网络服务器，但我相信你能弄清楚这一点。

Answer 2

在我看来，这与 VueJS 无关，但与您的网络服务器 (Apache/Nginx) 无关。

如果是 nginx，您可以添加新位置

location /old-site {
   root /old-site-dir/;
   try_files $uri $uri/ =404;
}