vue中用路由用history模式，在node中的配置方法

最新推荐文章于 2022-07-01 12:00:27 发布

原创最新推荐文章于 2022-07-01 12:00:27 发布 · 3.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #history #node

博客介绍了Vue中使用路由history模式时，无法搭配简单静态文件服务器的问题，如开发服务器能响应localhost:3000/todos，但生产环境简单静态服务器会返回404，还提到可使用中间件解决，官网教程详细简单，通过npm安装并导入使用可实现功能。

vue中用路由用history模式，在node中的配置方法

大家知道如果你在 Vue 中使用 hisrory 模式，是无法搭配简单的静态文件服务器的。例如，如果你使用 Vue Router 为 /todos 定义了一个路由，开发服务器已经配置了相应的 localhost:3000/todos 相应，但是一个为生产环境构建架设的简单的静态服务器会却会返回 404。

这时。我们有个简单的解决方法，就是使用 connect-history-api-fallback 这个中间件。
官网的教程非常详细而且简单。

使用npm安装：

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

导入中间件和使用：

// 导入数据包
var history = require('connect-history-api-fallback');

// 使用
var connect = require('connect');

var app = connect()
 .use(history())
 .listen(3000);

// 或者：

var express = require('express');

var app = express();
app.use(history());

最终实现我们想要的功能！