打通前后端构建一个Vue+Express的开发环境
前端做多了,自然就会想往后端伸手。更何况现在有了Node和Express,让前端做后端开发的学习降低了不少。 最近正好揽下了一个 Vue + Express + mysql 的小项目。项目开始时是前后端分开开发的,但是当后台做好一部分要进行连接测试时问题就来了。前端部分在每次修改过就需要build一次,而后台也每次需要重启一次服务器才能进行调试。可想而知,这样的开发和调试效率是很低的。在这么煎熬着做了一个功能之后,实在受不了。于是便想有没有什么方法可以热更新开发前后端。毕竟 vue-cli 在调试时,后台就是用 express 做的服务器。 在网上搜索了一下,发现果然有前辈们已经想到这个问题,并做了一个 Vue + Express 的开发环境。 可以参考这篇文章: 原理的话可以参考这篇文章,主要就是通过修改 webpack 的配置文件来达到同时开发前后台的目的。于是果断去 Fork 了作者在 Github 上的项目。 clone 下来运行之后发现,虽然热更新是没有问题了,但是对于前端 Vue 的部分来说,由于没有build,因此是无法打包变为生产环境的。那么为了走完这一步,便自己动手对项目进行了改造。 改造后的版本: 可 build 版 Vue + Express 开发环境 求个Star也欢迎批评指教
其中关于 webpack 的配置,没有使用原项目的配置文件,而是几乎将 vue-cli 生成的项目的配置文件都拷过来使用的。 这里需要注意的是,下面几个配置文件的所引用的位置变更一下即可。 server/index.js 这是 express 服务器的入口,在这里需要修改的地方主要有两个。引用 webpack 配置文件的路径,以及静态页面的设置。 import config from '../../build/webpack.dev.conf' //这里指向 vue-cli 拷贝过来的配置文件
const app = express() // view engine setup 模板文件,根据具体情况添加 // uncomment after placing your favicon in /public const compiler = webpack(config) app.use(webpackDevMiddleware(compiler,{ app.use(webpackHotMiddleware(compiler)) app.listen(4000) export default app webpack.dev.conf.js / webpack.prod.conf.js 这两个文件中,也只要修改一下最后代码注入的模板的路径即可。以 webpack.dev.conf.js 为例。 // 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,{ 因为是按照 vue-cli 生成出的目录来拷贝的,因此其余的文件都不需要做任何的修改。 接下来只要试着运行一下就可以了。 运行开发模式: 打包前端代码: 打包完之后,只要稍微修改一下 express 启动的 js 文件就可以变为正式上线的版本了。如此一来,就能很轻松愉快地进行全栈的开发了。个人感觉至少可以提高30%吧。所以各位不来试一试吗? 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |