无法访问我在 Apache2 服务器上运行的 VueJS 前端应用程序的路由

Question

我正在尝试使用 apache2 在 ubuntu 服务器上运行我的 VueJs 应用程序。但是，当我尝试访问应用程序中的任何路由时收到错误 404。我已经在

/dist

目录中添加了我构建的

/var/www/html/

文件夹，当我访问公共 url 时，它会加载主页。但是，当我转到任何路线时，例如

http://<public-ip>/device/:id

，Apache 返回“未找到”页面。

Vue Router配置历史模式如下：

import { createRouter, createWebHistory } from '@ionic/vue-router'

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomePage,
    },
    {
        path: '/device/:id',
        component: DevicePage
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

我的

.htaccess

文件看起来像这样：

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

此外，我还有一个用 Nodejs (express) 编写的 API 后端，它运行在同一台服务器的 8080 端口上，当访问设备页面时，它应该从 api 请求数据。然而，首先，我必须以某种方式配置应用程序以访问页面本身，然后才能看到 API 是否被成功访问。

Answer 1

您的 Vue.js 应用程序的 Apache 配置似乎有问题。要解决此问题，首先请确保在 Apache 服务器上启用了 mod_rewrite 模块。您可以通过运行以下命令来启用它：

sudo a2enmod 重写

接下来，重启Apache使修改生效：

复制代码 sudo systemctl 重新启动 apache2 之后，确保 Apache 配置允许对 /var/www/html/ 目录使用 .htaccess 文件。编辑您的 Apache 站点配置文件（通常位于 /etc/apache2/sites-available/000-default.conf 或 /etc/apache2/sites-available/your-domain.conf）并在 标记内添加以下指令：

CSS 复制代码 期权索引 FollowSymLinks MultiViews 允许覆盖所有 要求全部授予 这将允许使用 /var/www/html/ 目录中的 .htaccess 文件，并应用 .htaccess 文件中指定的重写规则。

进行这些更改后，保存配置文件并再次重启 Apache：

复制代码 sudo systemctl 重新启动 apache2 现在，您的 Vue.js 应用程序应该可以与历史模式路由器一起正常工作，并且在访问像 http:///device/:id 这样的路由时，您应该不会再收到 404 错误。