前端打包后, 路由模式为history时,用express测试服务端能否正常解析路由路径


安装依赖

cnpm i express -S
cnpm i connect-history-api-fallback -S

项目结构

demo
├── app.js
├── package.json
└── static/ # 前端打包后的文件放在这个目录下    

测试代码

// app.js
const express = require("express");
const connectHistoryApiFallback = require('connect-history-api-fallback');
const path = require('path'); // 引入path模块(node自带的路径解析模块)

const app = express();

// 使用connect-history-api-fallback中间件
app.use("/", connectHistoryApiFallback());

// 要访问的文件目录,前端打包后的文件放在这个目录下
app.use("/", express.static(path.join(__dirname, "./", "static")));

// 用于模拟测试 api
app.get("/api/get", (req, res) => res.send("响应返回的数据"));
app.post("/api/post", (req, res) => res.send("响应返回的数据"));

// 启动服务
app.listen(3000, "localhost", () => {
    console.log("服务器的端口为:3000...");
    console.log("访问地址为:http://localhost:3000/");
});   

启动

node app.js

访问

http://localhost:3000/   # 能访问就说明前端打包和配置没问题

如果前端测试访问页面没有问题,那肯定就是后端部署或者nginx配置有问题

connect-history-api-fallback参考:https://www.npmjs.com/package/connect-history-api-fallback