打通前后端构建一个Vue+Express的开发环境-创新互联
前端做多了,自然就会想往后端伸手。更何况现在有了Node和Express,让前端做后端开发的学习降低了不少。
我们提供的服务有:成都网站建设、网站设计、微信公众号开发、网站优化、网站认证、安岳ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的安岳网站制作公司最近正好揽下了一个 Vue + Express + mysql 的小项目。项目开始时是前后端分开开发的,但是当后台做好一部分要进行连接测试时问题就来了。前端部分在每次修改过就需要build一次,而后台也每次需要重启一次服务器才能进行调试。可想而知,这样的开发和调试效率是很低的。在这么煎熬着做了一个功能之后,实在受不了。于是便想有没有什么方法可以热更新开发前后端。毕竟 vue-cli 在调试时,后台就是用 express 做的服务器。
在网上搜索了一下,发现果然有前辈们已经想到这个问题,并做了一个 Vue + Express 的开发环境。
可以参考这篇文章:从零开始搭建 Express + Vue 开发环境
原理的话可以参考这篇文章,主要就是通过修改 webpack 的配置文件来达到同时开发前后台的目的。于是果断去 Fork 了作者在 Github 上的项目。 clone 下来运行之后发现,虽然热更新是没有问题了,但是对于前端 Vue 的部分来说,由于没有build,因此是无法打包变为生产环境的。那么为了走完这一步,便自己动手对项目进行了改造。
改造后的版本: 可 build 版 Vue + Express 开发环境 求个Star也欢迎批评指教
改造后目录
其中关于 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
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前名称:打通前后端构建一个Vue+Express的开发环境-创新互联
转载注明:http://pwwzsj.com/article/didhse.html