打通前后端構(gòu)建一個(gè)Vue+Express的開發(fā)環(huán)境

更新時(shí)間：2018年07月17日 10:05:27 作者：吃土的小此方

這篇文章主要介紹了打通前后端構(gòu)建一個(gè)Vue+Express的開發(fā)環(huán)境，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前端做多了，自然就會(huì)想往后端伸手。更何況現(xiàn)在有了Node和Express，讓前端做后端開發(fā)的學(xué)習(xí)降低了不少。

最近正好攬下了一個(gè) Vue + Express + mysql 的小項(xiàng)目。項(xiàng)目開始時(shí)是前后端分開開發(fā)的，但是當(dāng)后臺(tái)做好一部分要進(jìn)行連接測(cè)試時(shí)問(wèn)題就來(lái)了。前端部分在每次修改過(guò)就需要build一次，而后臺(tái)也每次需要重啟一次服務(wù)器才能進(jìn)行調(diào)試?？上攵?，這樣的開發(fā)和調(diào)試效率是很低的。在這么煎熬著做了一個(gè)功能之后，實(shí)在受不了。于是便想有沒(méi)有什么方法可以熱更新開發(fā)前后端。畢竟 vue-cli 在調(diào)試時(shí)，后臺(tái)就是用 express 做的服務(wù)器。

在網(wǎng)上搜索了一下，發(fā)現(xiàn)果然有前輩們已經(jīng)想到這個(gè)問(wèn)題，并做了一個(gè) Vue + Express 的開發(fā)環(huán)境。

可以參考這篇文章：從零開始搭建 Express + Vue 開發(fā)環(huán)境

原理的話可以參考這篇文章，主要就是通過(guò)修改 webpack 的配置文件來(lái)達(dá)到同時(shí)開發(fā)前后臺(tái)的目的。于是果斷去 Fork 了作者在 Github 上的項(xiàng)目。 clone 下來(lái)運(yùn)行之后發(fā)現(xiàn)，雖然熱更新是沒(méi)有問(wèn)題了，但是對(duì)于前端 Vue 的部分來(lái)說(shuō)，由于沒(méi)有build，因此是無(wú)法打包變?yōu)樯a(chǎn)環(huán)境的。那么為了走完這一步，便自己動(dòng)手對(duì)項(xiàng)目進(jìn)行了改造。

改造后的版本：可 build 版 Vue + Express 開發(fā)環(huán)境求個(gè)Star也歡迎批評(píng)指教

改造后目錄

其中關(guān)于 webpack 的配置，沒(méi)有使用原項(xiàng)目的配置文件，而是幾乎將 vue-cli 生成的項(xiàng)目的配置文件都拷過(guò)來(lái)使用的。
這里需要注意的是，下面幾個(gè)配置文件的所引用的位置變更一下即可。

server/index.js

這是 express 服務(wù)器的入口，在這里需要修改的地方主要有兩個(gè)。引用 webpack 配置文件的路徑，以及靜態(tài)頁(yè)面的設(shè)置。

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 拷貝過(guò)來(lái)的配置文件

const app = express()

// view engine setup 模板文件，根據(jù)具體情況添加
// 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))
// 引用最后的靜態(tài)文件
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

這兩個(gè)文件中，也只要修改一下最后代碼注入的模板的路徑即可。以 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',
   // 這里的路徑需要重新指定為現(xiàn)在的路徑
   template: 'src/server/views/index.html',
   inject: true
  }),
  new FriendlyErrorsPlugin()
 ]
})

因?yàn)槭前凑?vue-cli 生成出的目錄來(lái)拷貝的，因此其余的文件都不需要做任何的修改。

接下來(lái)只要試著運(yùn)行一下就可以了。

運(yùn)行開發(fā)模式：