美文网首页Vue
09、Vue-项目编译打包

09、Vue-项目编译打包

作者: EndEvent | 来源:发表于2017-07-28 09:16 被阅读914次
    • 编译打包
      $ 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}】`)
        }
    });
    
    目录结构

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

    相关文章

      网友评论

        本文标题:09、Vue-项目编译打包

        本文链接:https://www.haomeiwen.com/subject/wztckxtx.html