Vue 路由器托管在 apache2 上

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 错误。

错误：

原文由 Shiv Shankar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 vue.js 文档页面：

使用历史模式时，URL 看起来“正常”，例如 http://oursite.com/user/id 。美丽的！

但是，这里有一个问题：由于我们的应用程序是单页客户端应用程序，没有适当的服务器配置，如果用户直接在浏览器中访问 http://oursite.com/user/id ，将会收到 404 错误。现在这很难看。

不用担心：要解决此问题，您需要做的就是向您的服务器添加一个简单的包罗万象的后备路由。如果 URL 不匹配任何静态资源，它应该提供与您的应用程序相同的 index.html 页面。再次漂亮！

阿帕奇

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

原文由 connexo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这对我有用，因为我的 SPA 位于子文件夹中。将其写入 .htaccess 文件中。

 <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

原文由 cardonacoder 发布，翻译遵循 CC BY-SA 4.0 许可协议