大佬教程收集整理的这篇文章主要介绍了打通前后端构建一个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 模板文件，根据具体情况添加
// 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
以上是大佬教程为你收集整理的打通前后端构建一个Vue+Express的开发环境全部内容，希望文章能够帮你解决打通前后端构建一个Vue+Express的开发环境所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。