apache2上的Vue路由器托管

本文介绍了apache2上的Vue路由器托管的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I am hosting my vuejs project on apache server.

初始化项目

设置路由器

构建并托管到apache服务器

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

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

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

如果我运行 example 并转到 exmaple/sub 效果很好

If I run example and go to exmaple/sub It works fine

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

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

错误:

推荐答案

来自 vue.js文档页面:

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

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