express，宝塔nginx部署history模式的vue项目

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、express部署vue项目

vue项目配置如下，v

// 路由配置
const router = new VueRouter({
  mode: 'history',
  base: '/web',
  routes
})

// vue.config.js 打包配置
module.exports = {
  outputDir: './dist/web',
  publicPath: '/web',
  assetsDir: './static',
}

把vue项目打包后，把web文件夹放到express项目的根目录

使用express的静态文件夹托管

app.use(express.static(path.join(__dirname, '/web')));

如此就能通过localhost:3000/web/访问部署的vue项目了，此时还不支持history的路由模式
可以通过connect-history-api-fallback中间件来支持history的路由模式
https://github.com/bripkens/connect-history-api-fallback/

npm i connect-history-api-fallback

如此一来就能支持history的路由模式了，代码如下：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var ejs = require('ejs');
var history = require('connect-history-api-fallback');

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(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);

// 该步骤要在静态文件托管前面；且不能在express路由前面，否则会导致experss路由无法访问
app.use('/web',history({
  rewrites: [
    {from: /\/web\//, to: '/index.html'}
  ],
}))

app.use('/web',express.static(path.join(__dirname, '/web')));

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;

二、宝塔express站点里部署vue项目

把express项目上传到站点目录下；vue项目依然在exrpess根目录下


nginx配置如下

location /web/ {
    root /www/wwwroot/express.tinay.top/express-demo/;
     try_files $uri $uri/ /web/index.html;
     
     # nginx 调试输出
     # default_type text/html;
     # add_header Content-Type 'text/html;charset=utf-8';
     # return 200 '999';
  }

效果如下

---

总结

使用宝塔nginx或使用express的中间件都能完成vue项目的部署，只是不太清楚那种方式比较好
这两种方式访问的时候后面都会带有一个斜杠，不知道有没有什么方法能把斜杠去掉