Express + Nginx 部署Vue实现多路由跳转

场景如下：在 App客户端内有两种H5独立界面 商城 和 推荐界面，正常来说两个页面有两种路由 http://127.0.0.1/shop 和 http://127.0.0.1/recommend；但是Vue是单页面应用，如果直接将打包好的dist文件扔到服务器用Nginx指向对应目录的index.html的话，那就只能有一个入口；为了解决这种情况，搜集了下其他博客以及向同事讨教，记录下利用Express当作http服务器的解决思路；

服务器环境配置

以windows为例（最好还是linux）先安装需要的环境

• NodeJS
• npm
• pm2

实现步骤

首先Vue项目还是正常打包，将dist扔到服务器的对应目录，接着开始构建Express项目，在dist同级目录下输入以下命令安装依赖

//安装express  和 express-generator（相当于vue脚手架）
npm install express --save
npm install -g express-generator
//用express-generator构建express基础项目
npx express-generator
//web优化 压缩
npm install compression
//接着导入vue官网推荐的中间件 
npm install --save connect-history-api-fallback
//最后再执行下 install
npm install

以上命令执行完成后当前目录应该是这样的

可以先在当前目录执行

npm start

启动项目 访问 localhost:3000 ，出现如下界面说明一切正常

接着修改 app.js 文件里的内容，主要是通过中间件把Vue项目的路由关联起来，app.js整体代码如下

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var compression = require('compression');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

//压缩
app.use(compression());
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//自带的两行代码 注释掉
//app.use('/', indexRouter);
//app.use('/users', usersRouter);

//新增下面三行代码 注意 app.user 的顺序不能乱
var history = require('connect-history-api-fallback');
app.use(history());
app.use(express.static(path.join(__dirname, 'dist')));

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

配置完成后在当前目录用 pm2 启动项目

//demo_h5 为名称
pm2 start ./bin/www --name demo_h5 --watch

然后就可以看到项目正常启动了

这时候就可以在服务器上测试下多路由跳转了
浏览器输入 localhost:3000/shop localhost:3000/recommend 都可以直接进入对应页面

最后一步，通过Nginx 监听80端口 将对应请求转发到Express的端口
nginx.conf文件做如下配置

#127.0.0.1换成服务器的ip地址
		location /shop{
			proxy_pass    http://127.0.0.1:3000/shop;
			proxy_set_header       Host      $host;  
			proxy_set_header       X-Real-IP  $remote_addr; 
			proxy_set_header       X-Forwarded-For $proxy_add_x_forwarded_for;
		}
		location /recommend{
			proxy_pass    http://127.0.0.1:3000/recommend;
			proxy_set_header       Host      $host;  
			proxy_set_header       X-Real-IP  $remote_addr; 
			proxy_set_header       X-Forwarded-For $proxy_add_x_forwarded_for;
		}

重新加载nginx配置

nginx -s reload

这样就可以通过域名直接访问Vue对应的路由了