09、Vue-项目编译打包

  • 编译打包
    $ npm run build

会对应生成dist目录(如何生成的对应文件,是webpack中做了相关配置)
如果是在生产环境下,即需要将config/index.js中的对应的build,将productionSourceMap: true设置为false【对应的map文件即不会生成】

  • node调试
  - 编写prod.server.js
// prod.server.js
var express = require('express')
var PORT = 9393;
var IP = '0.0.0.0';
var app = express()
// 文件读取
var appData = require('./data.json');
var seller = appData.seller;    // 商家
var goods = appData.goods;  // 商品
var ratings = appData.ratings;  // 评论
// 路由器
var routes = express.Router();
// 路由: 根目录下时
routes.get('/', (req, res, next) => {
    // 指向位置
    req.url = '/index.html';
    // 执行以下
    next();
});
// 网站首页接受 GET 请求
routes.get('/seller', (req, res) => {
    // 相应客户端
    res.json({
        data: seller,
        errno: 0        // 表示没有错误       
    });
});
routes.get('/goods', (req, res) => {
    // 相应客户端
    res.json({
        data: goods,
        errno: 0        // 表示没有错误       
    });
});
routes.get('/ratings', (req, res) => {
    // 相应客户端
    res.json({
        data: ratings,
        errno: 0        // 表示没有错误       
    });
});
// 中间件
app.use('/api', routes);
// 指定static目录
app.use(express.static('./'));
var server = app.listen(PORT, IP, (err) => {
    if(err) {
        console.log(err)
    } else {
        console.log(`服务开启成功【端口号:${PORT}】`)
    }
});
09、Vue-项目编译打包_第1张图片
目录结构

发布时,只需要将dist上传到服务器,并把对应的prod.server.js脚本上传到服务器,之后通过node启动服务器即可;

你可能感兴趣的:(09、Vue-项目编译打包)