打通前后端构建Vue快递发展环境

如果你在前端做得太多，你自然会想在后端伸出手。更何况现在有了Node和Express，在前端做后端开发的学习减少了很多。

最近刚接手了Vue Express mysql的一个小项目。在项目开始时，前端和后端是分开开发的，但是当后端做一些连接测试时，问题就来了。前端部分每次修改都需要构建，后端部分每次调试前都需要重启服务器。可以想象，这样的开发调试效率是非常低的。在这样的折磨下做了一个功能，我受不了。所以不知道有没有办法更新开发的前后。毕竟调试vue-cli的时候，后台是用express做的服务器。

在网上搜索了一下，发现有前辈已经想到了这个问题，为Vue Express做了一个开发环境。

可以参考这篇文章：从头构建Express Vue开发环境

原则上可以参考这篇文章，主要是通过修改webpack的配置文件来达到前后都开发的目的。所以我决定在Github上分叉作者的项目。运行克隆后发现，热更新虽然没问题，但对于前端Vue部分，由于没有构建，无法打包到生产环境中。然后，为了完成这一步，项目由我自己改造。

修改版本：构建版本Vue Express开发环境。寻找明星也欢迎批评和建议

转型后目录

关于webpack的配置，原项目的配置文件没有使用，但是vue-cli生成的项目的配置文件几乎都是复制使用的。这里应该注意，以下配置文件的引用位置可以更改。

server/index.js

这是快递服务器的入口，这里主要有两个区域需要修改。引用webpack配置文件的路径，以及静态页面的设置。

从“express”导入express从“path”导入路径从“serve-favicon”导入favicon从“morgan”导入cookieParser从“cookie-parser er”导入bodyParser从“body-parser”导入webpack从“webpack”导入webpackDevMiddleware从“webpack-dev-middleware”导入webpack khotmiddleware从“webpack-hot-middleware”导入配置从././build/web pack . dev . conf//这指向配置文件const app=express()//Add//app . set(' view '，path . join(_ dirname，' view ')//app . set(' view engine '，' jade')//将您的favicon放入/public app . use(fav icon(path . join(_ dirname，' public '，' fav icon . ico '))app . use(logger(' dev ')app . use(body parser . JSON())app . use(body parser . urlended({ extend)。/view/index . html ')})app . listen(4000)导出默认app webpack . dev . conf . js/web pack . prod . conf . js

在这两个文件中，您只需要为最后一次代码注入修改模板的路径。以webpack.dev.conf.js为例。

var utils=require(' ./utils ')var web pack=require(' web pack ')var config=require('./config ')var merge=require(' web pack-merge ')var base web packkkconfig=require(' ./web pack。基地。conf ')var html web pack kkplugin=require(' html-web pack-plugin ')var friendyerrorsplugin=require('友好-错误-web pack-plugin ')//将热重载相关代码添加到条目chunksobject。keys(base webpackconfig。条目)中forEach(函数（名称){ BaseWebPackConfig。条目[名称]=[。]。/build/dev-client'].concat(base webpackconfig。entry[name]))})模块。exports=merge(base webpackconfig，{ module : { ruless 3360 utils。样式加载器({源地图3360 config。戴夫。cssourcemap })}，//便宜-模块-评估-来源-地图对开发更快devtool: ' #便宜“模块-评估-源-地图”，插件： [新webpack .definepreplugin({ ' process。env ' :配置。戴夫。env })，//https://github。com/glen jamin/webpack-hot-中间件#安装-使用新网络包.HotModuleReplacementPlugin()，新的网络包.NoEmitOnErrorsPlugin()，//https://github.com/ampendandwired/html-web pack-plugin新html web pack plugin({ filename : '索引。html '，//这里的路径需要重新指定为现在的路径模板： ' src/服务器/视图/索引。html '，inject: true })，new friendyerrorsplugin()]})因为是按照脚手架生成出的目录来拷贝的，因此其余的文件都不需要做任何的修改。

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

运行开发模式：

新公共管理运行开发打包前端代码：

新公共管理运行构建打包完之后，只要稍微修改一下表达启动的射流研究…文件就可以变为正式上线的版本了。如此一来，就能很轻松愉快地进行全栈的开发了。个人感觉至少可以提高30%吧。所以各位不来试一试吗？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。