打通前后端构建一个Vue+Express的开发环境


Posted in Javascript onJuly 17, 2018

前端做多了,自然就会想往后端伸手。更何况现在有了Node和Express,让前端做后端开发的学习降低了不少。

最近正好揽下了一个 Vue + Express + mysql 的小项目。项目开始时是前后端分开开发的,但是当后台做好一部分要进行连接测试时问题就来了。前端部分在每次修改过就需要build一次,而后台也每次需要重启一次服务器才能进行调试。可想而知,这样的开发和调试效率是很低的。在这么煎熬着做了一个功能之后,实在受不了。于是便想有没有什么方法可以热更新开发前后端。毕竟 vue-cli 在调试时,后台就是用 express 做的服务器。

在网上搜索了一下,发现果然有前辈们已经想到这个问题,并做了一个 Vue + Express 的开发环境。

可以参考这篇文章:从零开始搭建 Express + Vue 开发环境

原理的话可以参考这篇文章,主要就是通过修改 webpack 的配置文件来达到同时开发前后台的目的。于是果断去 Fork 了作者在 Github 上的项目。 clone 下来运行之后发现,虽然热更新是没有问题了,但是对于前端 Vue 的部分来说,由于没有build,因此是无法打包变为生产环境的。那么为了走完这一步,便自己动手对项目进行了改造。

改造后的版本: 可 build 版 Vue + Express 开发环境 求个Star也欢迎批评指教

打通前后端构建一个Vue+Express的开发环境

改造后目录

其中关于 webpack 的配置,没有使用原项目的配置文件,而是几乎将 vue-cli 生成的项目的配置文件都拷过来使用的。
这里需要注意的是,下面几个配置文件的所引用的位置变更一下即可。

server/index.js

这是 express 服务器的入口,在这里需要修改的地方主要有两个。引用 webpack 配置文件的路径,以及静态页面的设置。

import express from 'express'
import path from 'path'
import favicon from 'serve-favicon'
import logger from 'morgan'
import cookieParser from 'cookie-parser'
import bodyParser from 'body-parser'
import webpack from 'webpack'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'

import config from '../../build/webpack.dev.conf' //这里指向 vue-cli 拷贝过来的配置文件

const app = express()

// view engine setup 模板文件,根据具体情况添加
// app.set('views', path.join(__dirname, 'views'))
// app.set('view engine', 'jade')

// uncomment after placing your favicon in /public
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))
app.use(logger('dev'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(cookieParser())
app.use(express.static(path.join(__dirname, 'public')))

const compiler = webpack(config)

app.use(webpackDevMiddleware(compiler, {
 publicPath: config.output.publicPath,
 stats: { colors: true }
}))

app.use(webpackHotMiddleware(compiler))
// 引用最后的静态文件
app.use(express.static(path.join(__dirname, 'views')))
app.get('/', function (req, res) {
 res.sendFile('./views/index.html')
})

app.listen(4000)

export default app

webpack.dev.conf.js / webpack.prod.conf.js

这两个文件中,也只要修改一下最后代码注入的模板的路径即可。以 webpack.dev.conf.js 为例。

var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
 module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
 },
 // cheap-module-eval-source-map is faster for development
 devtool: '#cheap-module-eval-source-map',
 plugins: [
  new webpack.DefinePlugin({
   'process.env': config.dev.env
  }),
  // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
   filename: 'index.html',
   // 这里的路径需要重新指定为现在的路径
   template: 'src/server/views/index.html',
   inject: true
  }),
  new FriendlyErrorsPlugin()
 ]
})

因为是按照 vue-cli 生成出的目录来拷贝的,因此其余的文件都不需要做任何的修改。

接下来只要试着运行一下就可以了。

运行开发模式:

npm run dev

打包前端代码:

npm run build

打包完之后,只要稍微修改一下 express 启动的 js 文件就可以变为正式上线的版本了。如此一来,就能很轻松愉快地进行全栈的开发了。个人感觉至少可以提高30%吧。所以各位不来试一试吗?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 #Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 #Javascript
微信小程序倒计时功能实例代码
Jul 17 #Javascript
详解vue+webpack+express中间件接口使用
Jul 17 #Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 #Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 #Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 #Javascript
You might like
聊天室php&mysql(五)
2006/10/09 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
php四种定界符详解
2017/02/16 PHP
初识JQuery 实例一(first)
2011/03/16 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[19:15]DK战队纪录片
2014/09/02 DOTA
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python hashlib模块用法实例分析
2018/06/12 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
工艺工程师工作职责
2013/11/23 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
安全生产大检查方案
2014/05/07 职场文书
社区平安建设方案
2014/05/25 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS