vue + express的集成

node环境下集成 vue+express

写在前面

前端小白一个，刚加入前端这个浩浩荡荡的大军的时候，前后端分离已经是一个大趋势了，所以秉持着一个学习的态度，尝试着搭建了一个vue+express的环境

创建vue项目

搭建脚手架

npm install -g vue-cli

创建基于webpack的项目

vue init webpack testapp

安装依赖并运行项目

cd testapp
npm install
npm run dev

此时vue项目已经启动，在浏览器输入localhost:8080，页面会显示
此时你会想，怎么把express和vue集成在一起呢？不要着急，往下看。

集成express

根目录新建一个server文件夹
server文件夹下新建文件app.js
安装express

npm install express --save

server目录下新建一个文件夹，命名为routes
app.js中启动服务器，代码如下：

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 }))
// 路由
var goodsRouter = require('./routes/goods')
app.use('/goods', goodsRouter)
// 访问静态资源
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')
})

启动,部署项目

本地启动项目的话，需要同时启动vue和express，分别是npm run dev（vue启动）和 node server/app.js(启动server下面的app.js)
部署到服务器上只需要启动express就好了，部署之前打包：npm run build

示例代码已经推到码云上了，传送门：https://gitee.com/jbIngram/vue-express

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_20074443/article/details/86089580
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-02-25 01:21:36
阅读 ( 1385 )
分类：前端

vue + express的集成

node环境下集成 vue+express

写在前面

创建vue项目

集成express

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看