apache - 托管在 apache2 上的 Vue 路由器

Question

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

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

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

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

如果我运行 http://example.com然后转到 http://exmaple.com/sub效果很好

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

错误:

Answer 1

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