安装依赖
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