Vol.vue前后端发布笔记

Vol.vue前后端发布

后端发布

• 后端的发布官网已经写得很详细，这里只补充一点，在发布的时候部署模式尽量选择独立，选择依赖框架必须要在系统安装相应的框架环境，配置选择Release
• 官网详细发布步骤，传送门:Vol.vue框架文档

前端发布

• 前端发布前先修改http.js :

//将上线环境的baseUrl改成本地，不然会去访问到在线演示地址
else if (process.env.NODE_ENV == 'production') {
  axios.defaults.baseURL = 'http://127.0.0.1:9991/';//'http://api.volcore.xyz/';
}

• 按官网说明，双击build.bat，一会儿会生成一个dist文件夹，即发布文件
• 使用node作为服务器，来启动前端项目

1. 全局安装 express-generator

 npm install express-generator -g

2. 在你要存放服务器文件的文件夹下打开cmd窗口
   例如在D盘根目录下，调出cmd窗口

//输入命令，此时会在D盘根目录创建一个server的文件夹，用来存放项目
express -e server

3. 进入server文件夹，调出cmd
   初始化安装依赖模块

npm install

4. 将dist文件夹下所有文件复制到server的public文件夹下
5. 修改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 indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

//添加,导入http模块
var http=require('http');
var app = express();


//设置端口号 使用npm启动这样设置port
process.env.PORT=8080;
//使用pm2启动这样设置port
//app.set('port', 8080);
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

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

//启动及端口
http.createServer(app).listen(app.get('port'),function(){    
      console.log('Express server listening on port ' + app.get('port'));
});

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

6. 使用npm命令启动

//必须在当前项目目录下，不能关闭该命令窗口
npm start
//关闭
npm stop //或者直接关闭命令窗口

• 优化使用pm2来管理前端服务，有点类似与nginx和tomcat,(同样也可以使用这两款软件来管理前端服务)

7. 安装pm2插件

npm install pm2 -g //全局
//查看是否安装成功
pm2 list

8. 修改app.js 中的监听端口

//使用pm2启动这样设置port
app.set('port', 8080);

9. 启动app.js

pm2 start app.js  //启动app.js应用程序
//查看是否启动成功
pm2 list

访问localhost:8080正常，关闭命令窗口
pm2 还有很多功能，感兴趣可以自行去搜索资料
最后再根据官网提示将后端也发布到IIS下，做到后台静默运行服务。