美文网首页
vue与node结合开发部署

vue与node结合开发部署

作者: 泪滴在琴上 | 来源:发表于2019-01-15 14:17 被阅读10次

    服务端,使用nodejs搭配express 框架配合搭建提供一个API服务,以及服务端渲染,客户端则选择 vuejs 开发前端页面,vue-router做路由,vuex做状态管理 , axios 做ajax请求。

    创建服务端

    mkdir server
    cd server/
    touch app.js
    

    安装express

    npm install express --save
    npm install body-parser --save
    

    写后端启动文件 app.js

    var express = require('express');
    var fs = require('fs');
    var path = require('path');
    var bodyParser = require('body-parser');
    var app = express();
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    // 访问静态资源
    app.use(express.static(path.resolve(__dirname, '../dist')));
    // 访问单页
    app.get('*', function (req, res) {
    var html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8');
     res.send(html);
    });
    // 监听
    app.listen(8081, function () {
      console.log('success listen...8081');
    });
    

    打包并部署

    npm run build
    node server/app.js
    

    在浏览器输入 http://127.0.0.1:8081/ 就能看到页面了

    相关文章

      网友评论

          本文标题:vue与node结合开发部署

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