托管在 apache2 上的 Vue 路由器

Question

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

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

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

这运行在本地没问题，但是 vue 路由器在服务器上坏了。例子

如果我运行http://example.com and go to http://exmaple.com/sub 效果很好

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

错误：

Answer 1

这似乎不是你的问题，我想是 apache .htaccess 问题，您的本地可能有该文件，而您的服务器没有。

请检查一下，您还上传了 .htaccess 作为隐藏文件到您的服务器，您可能忘记上传了。

如果不存在，您可以查看此参考帮助：https://router.vuejs.org/en/essentials/history-mode.html

并添加您自己的 .htaccess 文件（如果不存在）。

Answer 2

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

阿帕奇

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

Answer 3

这对我有用，因为我的 SPA 在 .htaccess 文件中的 subfolder.Write 中。

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

网站文件夹：C:\xampp\htdocs\dist

.htaccess 文件发布：C:\xampp\htdocs\dist\.htaccess

学分： https://gist.github.com/Prezens/f99fd28124b5557eb16816229391afee

Answer 4

嗨，我的朋友，如果您使用 Linux os，请走这条路： /etc/apache2/sites-enabled/000-default.conf 并添加以下代码：

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

托管在 apache2 上的 Vue 路由器

Vue Router hosting on apache2

apache

vue.js

vue-router

vuejs2

阿帕奇