打通前后端构建一个Vue+Express的开辟情况

发布时间: 2019-05-27 21:29:17 来源: 互联网 栏目: JavaScript 点击:

这篇文章重要简介了打通前后端构建一个Vue+Express的开辟情况,小编认为挺不错的,如今分享给大年夜家,也给大年夜家做个参考。一路跟随小编过去看看吧

前端做多了,天然就会想往后端伸手。更何况如今有了Node和Express,让前端做后端开辟的进修降低了很多。

比来正好揽下了一个 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

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])
})

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%吧。所以各位不来试一试吗?

以上就是本文的全部内容,欲望对大年夜家的进修有所赞助,也欲望大年夜家多多支撑我们。

本文标题: 打通前后端构建一个Vue+Express的开辟情况
本文地址: http://yourctp.com/wangluo/javascript/234767.html

假设认为本文对您有所赞助请赞助本站

付出宝扫一扫赞助微信扫一扫赞助

  • 付出宝扫一扫赞助
  • 微信扫一扫赞助
  • 付出宝先领红包再赞助
    声明:凡注明"本站原创"的一切文字图片等材料,版权均属真实的棋牌一切,迎接转载,但务请注明出处。
    Vue无穷滑动周选择日期的组件的示例代码vue-router中的hash和history两种形式的差别
    Top