使用express或koa或nginx部署history路由模式的单页面应用

使用hash模式会有#，影响美观，所以使用history模式会是个更好的选择。

前端项目打包上线部署，可以使用下面的方式部署history模式的项目，下面以 jyH5 为例

expressjs部署

express脚手架搭建的app.js中添加如下代码：

// catch 404 and forward to error handler
app.use(function(req, res, next) {const path = "/jyH5/";if (req.url.indexOf(path) !== -1) {//请求url包含 /jyH5/ 路径res.sendFile(__dirname + "/public" + path + "index.html"); // 返回 index.html 文件;}else{next(createError(404));}
});
app.use(express.static('public'))//暴露public文件夹下的所有文件

打包后的文件放在 /public/jyH5/ 这个文件夹下，目录结构如下图：

koa2部署

koa2脚手架搭建的app.js中添加如下代码：

const fs = require("fs");
app.use(async (ctx, next) => { //使用 history 路由中间件,需要放在koa-static前执行const path = "/jyH5/"; // 项目部署的路径await next(); // 等待请求执行完毕console.log(ctx.request.url, ctx.response.status);if (ctx.response.status === 404 && ctx.request.url.includes(path)) {// 判断是否符合条件ctx.type = "text/html; charset=utf-8"; // 修改响应类型ctx.body = fs.readFileSync(__dirname + "/public" + path + "index.html"); // 修改响应体}
});app.use(require('koa-static')(__dirname + '/public'))

打包后的文件放在 /public/jyH5/ 这个文件夹下，目录结构如下图：

nginx部署

nginx.conf文件中添加如下代码：

http {#...其他配置server {listen       8080;server_name  localhost;# server_name  domain2.com www.domain2.com;# history路由模式需要下面的配置location / { #部署在根目录下index index.html index.htm;proxy_set_header Host $host;# history模式最重要就是这里try_files $uri $uri/ /index.html;# index.html文件设置协商缓存即可add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';}location /jyH5 { #部署在根目录/jyH5文件夹下index /jyH5/index.html;proxy_set_header Host $host;# history模式最重要就是这里try_files $uri $uri/ /jyH5/index.html;#依次匹配try_files后面的所有地址,都没匹配上时使用最后一个地址# index.html文件设置协商缓存即可add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';}}
}

上面是两套配置，一套是部署在根目录下，一套是部署在jyH5目录下，根据自己需要配置。打包后的文件目录结构如下图：