打通前后端构建一个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+JSon 无刷新分页实现代码
Apr 01 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
js实现简单掷骰子小游戏
Oct 24 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程序实现支持页面后退的两种方法
2008/06/30 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python中正则表达式的详细教程
2015/04/30 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python聊天室程序(基础版)
2018/04/01 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
Keras自定义IOU方式
2020/06/10 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
学生档案自我鉴定
2013/10/07 职场文书
银行贷款委托书范本
2014/10/11 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
员工升职自荐信
2015/03/27 职场文书
田径运动会通讯稿
2015/07/18 职场文书