打通前后端构建一个Vue+Express的开发环境
前端做多了,自然就会想往后端伸手。更何况现在有了Node和Express,让前端做后端开发的学习降低了不少。
最近正好揽下了一个 Vue + Express + mysql 的小项目。项目开始时是前后端分开开发的,但是当后台做好一部分要进行连接测试时问题就来了。前端部分在每次修改过就需要build一次,而后台也每次需要重启一次服务器才能进行调试。可想而知,这样的开发和调试效率是很低的。在这么煎熬着做了一个功能之后,实在受不了。于是便想有没有什么方法可以热更新开发前后端。毕竟 vue-cli 在调试时,后台就是用 express 做的服务器。
在网上搜索了一下,发现果然有前辈们已经想到这个问题,并做了一个 Vue + Express 的开发环境。
可以参考这篇文章:从零开始搭建 Express + Vue 开发环境
原理的话可以参考这篇文章,主要就是通过修改 webpack 的配置文件来达到同时开发前后台的目的。
改造后的版本:
改造后目录 其中关于 webpack 的配置,没有使用原项目的配置文件,而是几乎将 vue-cli 生成的项目的配置文件都拷过来使用的。 这里需要注意的是,下面几个配置文件的所引用的位置变更一下即可。
server/index.js 这是 express 服务器的入口,在这里需要修改的地方主要有两个。引用 webpack 配置文件的路径,以及静态页面的设置。
import express from 'express'
import path from 'path'
import favicon from 'serve-favicon'//前端全栈交流学习圈“866109386
import logger from 'morgan'//帮助1-3年前端人员突破技术瓶颈,提升思维能力
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])
})//前端全栈学习交流圈:866109386
//帮助1-3年前端人员突破技术瓶颈提升思维能力
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%吧。所以各位不来试一试吗?

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
-
上一篇
搜索框出现故障-又是一个通宵的晚上
概述 每年的电商双11,都是注定要通宵的。流量一大,什么问题都可能发生。果然,今年的双11又是一个连续通宵的节奏。 小程序前端界面的搜索框出故障了,一片空白 顿时报障群里,报障消息铺天盖地,都在说搜索框用不了。顿时哥的头发感觉瞬间都是直的了,太紧张太害怕了。 定位问题 电商的搜索,一般都是要借助大数据的,由专门的大数据团队提供接口输出数据。因此这里首先要判断是否大数据的接口出问题了。赶紧联系大数据团队的人,让他们定位。得到的回复是: 大数据搜索接口完全正常,响应时间都很快。 大数据接口确定没问题后,赶紧联系前端小程序的同学抓包,因为有可能一进入搜索页面,前端就出现错误了,连请求都没发送到大数据接口。果然,是小程序前端的问题,JavaScript脚本有问题。 这真的是无语了,测试人员难道没测试就上线了。后面才知道,原来是那天上了个超级紧急的需求,开发加上测试,一天搞定,并没有做完整全面的测试就上线了。 其实是可以不用找大数据团队定位问题的,因为搜索页面是一进入就空白了,没任何的后端错误提示,也没有出现正在加载的进度条。从这里就可以判断出,小程序端出问题了。不过当时太紧张了,没想的那么细致...
-
下一篇
php单元测试(phpunit)中自定义万能通用仿件
一、背景 如果在项目中经常用phpunit来做单元测试的话(所以看此文章的伙伴们需要单元测试基础),应该都知道,最重要的是依赖的模拟,也就是仿件或者打桩,所以你一定遇到过各种情况的依赖模拟困难,最近我就遇到一个大部分人或者代码中都会出现的模拟依赖困难的情况。这也是本文中通用讲到的一个例子,场景如下: 其中我们只需测试UserService类,UserService类写成代码为: <?php namespace app\service\tanjiajun; use app\lib\App; use app\model\tanjiajun\UserModel; class UserService { public function getUserOrderList() { $userModel = App::make(UserModel::class); $userList = $userModel::find() ->select() ->asArray() ->all(); $result = []; f...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- 面试大杂烩
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS7设置SWAP分区,小内存服务器的救世主
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长