apache上的Vue-router,子目录下的SPA,只能通过重定向访问页面 [英] Vue-router on apache, SPA in sub-directory, can only access pages by redirect

查看:35
本文介绍了apache上的Vue-router,子目录下的SPA,只能通过重定向访问页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以我有一个 Vue 应用程序,用于在 apache 开发服务器上设置的客户端.我这样做是为了匹配生产环境.该应用程序位于子目录中,我将 vue-router 上的base"选项设置为匹配.如果我导航到我的虚拟主机根目录,它会正确重定向,但是通过输入地址导航到相同的地址会给出 404.

这是我的路由器代码:

const 路由 = [{路径:'/',重定向:'/伦敦'},{路径:'/:城市',组件:homeView}]const 路由器 = 新的 VueRouter ({模式:'历史',路线,基址:'/子目录/'})

我在子目录"中也有相关的 Apaache .htaccess:

重写引擎开启重写基数/重写规则 ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-d重写规则./index.html [L]</IfModule>

因此,如果我导航到cityapp.local/subdir",它会重定向到cityapp.local/subdir/london",但如果我输入cityapp.local/subdir/london",则会得到 apache 404 页面.

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

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

解决方案

天啊,昨天和今天的很长时间都在寻找解决方案,结果找到了答案:Vue 帮助论坛:Vue webpack 项目路径更改

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

重写引擎开启RewriteBase/subdirectoryNameRewriteRule ^subdirectoryName/index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-d重写规则./subdirectoryName/index.html [L]</IfModule>

老实说,我昨天尝试了类似的东西.我将 RewriteBase 更改为 subdir 但没有更改重写规则!我不擅长 .htaccesss 的东西:(

So I have a Vue app for a client set up on an apache dev server. I am doing this to match the production environment. The app is in a subdirectory and I set the 'base' option on vue-router to match. If I navigate to my virtual host root it redirects properly, however navigating to the same address by typing the address in gives a 404.

Here is my router code:

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

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

I also have the relevant Apaache .htaccess in the 'subdir':

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

So if I navigate to "cityapp.local/subdir" it redirects to "cityapp.local/subdir/london", but if I type "cityapp.local/subdir/london" I got the apache 404 page.

Any thoughts or help would be appreciated!

EDIT: If I set my virtual host to include the subdir and removed the base option from the router, everything works fine. However, I cannot do this on production so I hope this info helps a little.

解决方案

Jeez, was looking for a solution to this for a good chunk of time yesterday and today and just found the answer: Vue help forum: Vue webpack project path change

Relevant code for anyone else that my find this:

<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>

I honestly tried something similar yesterday. I changed the RewriteBase to the subdir but not the rewrite rules! I'm bad at .htaccesss stuff :(

这篇关于apache上的Vue-router,子目录下的SPA,只能通过重定向访问页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆