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

Jeeez昨天和今天一直在寻找解决方案，只是找到了答案：Vue help forum: Vue webpack project path change

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

<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版本可能是一个错误。

“ ^ $”的RewriteRule在2.2.21和2.4.2之间中断 https://bz.apache.org/bugzilla/show_bug.cgi?id=53929

您可以在Apache配置中使用Fallback资源而不是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>

Answer 3

我通过在我的网站配置中添加FallbackResource /index.html来解决此问题...

/ etc / apache2 / sites-enabled / {您的域} .conf中的目录

DocumentRoot /var/www/yourApp/dist
<Directory "/var/www/yourApp/dist">
    FallbackResource /index.html
</Directory>

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

3 个答案: