Vue Router 托管在 apache2 上 [英] Vue Router hosting on apache2

查看:45
本文介绍了Vue Router 托管在 apache2 上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

const router = new VueRouter({路线:路线,//相对:真,模式:'历史'});

这在本地运行良好,但 vue 路由器在服务器上中断.示例

如果我运行

解决方案

来自 vue.js 文档页面:

<块引用>

使用历史模式时,URL 看起来正常",例如http://oursite.com/user/id.漂亮!

但是,这里出现了一个问题:由于我们的应用程序是一个单页客户端应用程序,没有适当的服务器配置,如果用户访问 http://oursite.com/user/id 直接在他们的浏览器中.现在这很丑陋.

不用担心:要解决这个问题,您需要做的就是向您的服务器添加一个简单的全能回退路由.如果 URL 与任何静态资源都不匹配,它应该提供与您的应用所在的 index.html 页面相同的页面.再次美丽!

阿帕奇

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

I am hosting my vuejs project on apache server.

  1. init project
  2. setup router
  3. Build and hosted to apache server

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

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

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

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

Error:

解决方案

From the vue.js documentation page:

When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful!

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.

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>

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

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