1.前端构建项目

参考vue-cli cli.vuejs.org/zh/guide/cr… 初始化项目，然后本地npm run serve成功之后，进行npm run build构建，在输出包 dist/ 下面有我们需要部署到服务器的静态资源，拷贝他们存放到 express项目代码的public下面。

2.express访问资源修改

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

// 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('/', indexRouter);
// app.use('/users', usersRouter);

// 在此之前可以匹配 /api/xxx 之类的 api请求 优先匹配

// 修改静态资源的路径 打包出来的前端静态文件index.html 引用的js文件路径 如下： xxhost.com/js/xxx.js 会被映射到 xxhost.com/public/dist/js/xx.js 这样就可以正常访问所有的依赖的静态资源了  优先匹配
app.use(express.static(path.join(__dirname, 'public/dist')));

// 处理剩下除了 api请求 / 主页面引用的资源 之外的所有访问资源路径 这样子导致需要前端去处理404的场景，后续前端路由再实现就好了
app.get('*', function() {
  const html = fs.readFileSync(path.join(__dirname, 'public/dist/index.html'), 'utf-8');
  res.send(html);
})

// 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;

注释了之前的默认路由，现在除了之后会留给接口api 和 index.html引用的资源的url访问之外，所有的访问都默认返回静态资源的html，然后前端的js代码这时候接管了浏览器路径改变的事件处理，动态去加载相应的js，也就是所谓的SPA 单页应用了。html这个页面是被浏览器缓存起来的不会重复触发首页更新，所以之后再慢慢加前端的路由逻辑就好了。

好了，这个时候大家本地启动node服务 npm run dev 应该就可以访问到前端的页面了。

git地址后台： gitee.com/wanyicheng6…

git地址前端： gitee.com/wanyicheng6…

Vue构建的项目部署到express服务上访问

1.前端构建项目

2.express访问资源修改