apache上的Vue-router，子目录中的SPA，只能通过重定向访问页面

Question

因此，我在apache开发服务器上为客户端设置了Vue应用。我这样做是为了配合生产环境。该应用程序位于子目录中，我在vue-router上将“ base”选项设置为匹配。如果我导航到我的虚拟主机根目录，则它会正确重定向，但是通过在其中键入地址来导航到相同的地址，则会显示404。

这是我的路由器代码：

const routes = [
  {path: '/', redirect: '/london' },
  {path: '/:city', component: homeView}
]

const router = new VueRouter ({
  mode: 'history',
  routes,
  base: '/subdir/'
})

我在'subdir'中也有相关的Apaache .htaccess：

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

因此，如果我导航到“ cityapp.local / subdir”，它会重定向到“ cityapp.local / subdir / london”，但是如果我输入“ cityapp.local / subdir / london”，则会显示apache 404页面。

任何想法或帮助将不胜感激！

编辑：如果我将虚拟主机设置为包括子目录，并从路由器中删除了基本选项，则一切正常。但是，我无法在生产中执行此操作，因此希望此信息对您有所帮助。

Answer 1

Jeez昨天和今天一直在寻找解决方案，只是找到了答案：Vue帮助论坛：Vue Webpack项目路径更改

我发现的其他人的相关代码：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subdirectoryName
RewriteRule ^subdirectoryName/index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /subdirectoryName/index.html [L]
</IfModule>

老实说，我昨天尝试过类似的方法。我将RewriteBase更改为子目录，但未更改重写规则！我对.htaccesss东西不好

Answer 2

这可能是您的 apache 版本的错误。

“^$”的重写规则在 2.2.21 和 2.4.2 之间打破 https://bz.apache.org/bugzilla/show_bug.cgi?id=53929

您可以在 apache 配置中使用 Fallback ressource 而不是 mod_rewrite。这个对我有用。

在/etc/apache2/apache2.conf

<VirtualHost *:80>
    ServerName YourServerName
    DocumentRoot /var/www/yourApp/dist
    <Directory "/var/www/yourApp/dist">
        FallbackResource /index.html
    </Directory>
</VirtualHost>