Vue.js 单页面应用在 Heroku 上的无忧部署：破解 URL 路由的挑战

2024-03-06 14:48:20

在 Heroku 上无缝部署 Vue.js 单页面应用：Vue Router 与 Express 的完美结合

引言

单页面应用程序 (SPA) 因其流畅的用户界面和快速的响应而备受青睐。Vue.js 是构建 SPA 的流行框架，而 Vue Router 使得管理应用程序的 URL 路由变得轻而易举。然而，在 Heroku 等平台上部署 SPA 时，URL 路由可能会成为一个障碍。本文将深入探讨 Vue Router 与 Express 的集成，并提供分步指南，帮助你克服在 Heroku 上部署 SPA 的常见挑战。

问题：URL 路由在 Heroku 上的陷阱

在本地环境中，Vue Router 可以无缝处理 URL 路由。但是，在 Heroku 上，服务器使用反向代理，将所有请求重定向到根路径 (/)。这与 Vue Router 的默认路由模式（哈希模式）不兼容，该模式会在 URL 中包含一个井号 (#)。

解决方案：使用历史模式和重写根路径

为了解决 Heroku 上的 URL 路由问题，我们需要进行两项关键配置：

1. 切换到历史模式：

Vue Router 提供了历史模式，它允许在不使用哈希标记的情况下更新 URL。

2. 重写根路径请求：

反向代理将所有请求重定向到根路径。我们需要重写对根路径的请求，使其指向我们的 Vue Router 应用。

分步指南

1. 安装中间件：

首先，安装 connect-history-api-fallback 中间件，它将重写对根路径的请求。

npm install connect-history-api-fallback --save

2. 配置 Express：

在你的 Express 应用的 server.js 文件中，配置 Vue Router 和中间件：

const express = require('express');
const app = express();
const router = require('./router');
router.push(`/`);
const history = require('connect-history-api-fallback')();
app.use(history);
app.use('/', router);