打通先後端構建一個Vue+Express的開發環境

前端作多了，天然就會想日後端伸手。更況且如今有了Node和Express，讓前端作後端開發的學習下降了很多。

最近正好攬下了一個 Vue + Express + mysql 的小項目。項目開始時是先後端分開開發的，可是當後臺作好一部分要進行鏈接測試時問題就來了。前端部分在每次修改過就須要build一次，然後臺也每次須要重啓一次服務器才能進行調試。可想而知，這樣的開發和調試效率是很低的。在這麼煎熬着作了一個功能以後，實在受不了。因而便想有沒有什麼方法能夠熱更新開發先後端。畢竟 vue-cli 在調試時，後臺就是用 express 作的服務器。

在網上搜索了一下，發現果真有前輩們已經想到這個問題，並作了一個 Vue + Express 的開發環境。

能夠參考這篇文章：從零開始搭建 Express + Vue 開發環境

原理的話能夠參考這篇文章，主要就是經過修改 webpack 的配置文件來達到同時開發先後臺的目的。

改造後的版本：

改造後目錄 其中關於 webpack 的配置，沒有使用原項目的配置文件，而是幾乎將 vue-cli 生成的項目的配置文件都拷過來使用的。 這裏須要注意的是，下面幾個配置文件的所引用的位置變動一下便可。

server/index.js 這是 express 服務器的入口，在這裏須要修改的地方主要有兩個。引用 webpack 配置文件的路徑，以及靜態頁面的設置。

import express from 'express'
import path from 'path'
import favicon from 'serve-favicon'//前端全棧交流學習圈「866109386
import logger from 'morgan'//幫助1-3年前端人員突破技術瓶頸，提高思惟能力
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])
})//前端全棧學習交流圈：866109386
 //幫助1-3年前端人員突破技術瓶頸提高思惟能力
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%吧。因此各位不來試一試嗎？