vue与node结合开发部署

Author Avatar
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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/ 就能看到页面了