vue与node结合开发部署

julytian 4月 06, 2017

目前，技术圈都流行前后端分离，服务端渲染。vuejs由于其友好的中文文档，相对于react容易上手。服务端,我喜欢使用nodejs搭配express 框架配合搭建提供一个API服务，以及服务端渲染,客户端则选择 vuejs 开发前端页面，vue-router做路由，vuex做状态管理 , axios 做ajax请求。

开发准备

1.全局安装 Vue-cli

1	npm i vue-cli -g

2.创建webpack 模板项目文件，按照提示一直下一步，完成后按提示执行代码

1	vue init webpack vue-node

3.安装包依赖并运行

1
2
3

cd vue-node
npm install
npm run dev

tips: 如果npm卡住，可以使用淘宝源或者安装 cnpm

1	$ npm install -g cnpm --registry=https://registry.npm.taobao.org

4.修改文件结构

将 src 文件夹修改为 client
将 webpack.base.conf.js 内的 src 地址修改为 client

5.创建服务端

1
2
3

mkdir server
cd server/
touch app.js

6.安装express

1 2	npm install express --save npm install body-parser --save

7.写后端启动文件 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');
});

打包并部署

1 2	npm run build node server/app.js

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