apache2上的Vue路由器托管 [英] Vue Router hosting on apache2

问题描述

我将我的vuejs项目托管在apache服务器上.

I am hosting my vuejs project on apache server.

1. 初始化项目
2. 设置路由器
3. 构建并托管到apache服务器

const router = new VueRouter({
  routes: Routes,
  // relative: true,
  mode: 'history'
});

这在本地运行正常，但是vue路由器在服务器上中断. 例子

This runs fine in local, but vue router breaks on server. Example

如果我运行 http://example.com 并转到

If I run http://example.com and go to http://exmaple.com/sub It works fine

但是，如果我刷新页面，它将抛出404错误.

but if I refresh the page It will throw 404 Error.

错误:

推荐答案

来自 vue.js文档页面:

在使用历史记录模式时，URL看起来将为正常"，例如 http://oursite.com/user/id .好漂亮！

但是，这里出现了一个问题:由于我们的应用程序是单页客户端应用程序，没有正确的服务器配置，因此如果用户访问

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.

不用担心:要解决此问题，您需要做的就是向服务器添加一条简单的全部捕获"后备路由.如果该网址与任何静态资产都不匹配，则该网址应与您的应用程序所在的index.html页面相同.再次美丽！

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

Apache

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

这篇关于apache2上的Vue路由器托管的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！