一個(gè)vue-cli的項(xiàng)目結(jié)構(gòu)如下:

目錄

結(jié)構(gòu)預(yù)覽

├─build         // 保存一些webpack的初始化配置,項(xiàng)目構(gòu)建│ ├─build.js      // 生產(chǎn)環(huán)境構(gòu)建│ ├─check-version.js  // 檢查npm、node版本│ ├─vue-loader.conf.js // webpack loader配置│ ├─webpack.base.conf.js// webpack基礎(chǔ)配置│ ├─webpack.dev.conf.js // 開(kāi)發(fā)環(huán)境配置，構(gòu)建本地開(kāi)發(fā)服務(wù)器│ ├─webpack.prod.conf.js// 生產(chǎn)環(huán)境的配置│├─config        // config文件夾保存一些項(xiàng)目初始化的配置│ ├─dev.env.js     // 開(kāi)發(fā)環(huán)境的配置│ ├─index.js      // 項(xiàng)目一些配置變量│ ├─prod.env.js     // 生產(chǎn)環(huán)境的配置│├─dist         // 打包后的項(xiàng)目├─node_modules     // 依賴包│├─src          // 源碼目錄│ ├─assets       // 靜態(tài)文件目錄│ ├─components     // 組件文件│ ├─router       // 路由│ ├─App.vue       // 是項(xiàng)目入口文件│ ├─main.js       // 是項(xiàng)目的核心文件，入口├─static        // 靜態(tài)資源目錄 ├─.babelrc       // Babel的配置文件├─.editorconfig     // 代碼規(guī)范配置文件├─.gitignore      // git忽略配置文件├─.postcssrc.js     // postcss插件配置文件├─index.html      // 頁(yè)面入口文件├─package-lock.json   // 項(xiàng)目包管控文件├─package.json     // 項(xiàng)目配置└─README.md       // 項(xiàng)目說(shuō)明書

結(jié)構(gòu)解析

build

dev-server.js

首先來(lái)看執(zhí)行”npm run dev”時(shí)候最先執(zhí)行的build/dev-server.js文件。該文件主要完成下面幾件事情：

說(shuō)明： express服務(wù)器提供靜態(tài)文件服務(wù)，不過(guò)它還使用了http-proxy-middleware，一個(gè)http請(qǐng)求代理的中間件。前端開(kāi)發(fā)過(guò)程中需要使用到后臺(tái)的API的話，可以通過(guò)配置proxyTable來(lái)將相應(yīng)的后臺(tái)請(qǐng)求代理到專用的API服務(wù)器。

// 檢查NodeJS和npm的版本require('./check-versions')()// 獲取基本配置var config = require('../config')// 如果Node的環(huán)境變量中沒(méi)有設(shè)置當(dāng)前的環(huán)境（NODE_ENV），則使用config中的dev環(huán)境配置作為當(dāng)前的環(huán)境if (!process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)}// opn是一個(gè)可以調(diào)用默認(rèn)軟件打開(kāi)網(wǎng)址、圖片、文件等內(nèi)容的插件// 這里用它來(lái)調(diào)用默認(rèn)瀏覽器打開(kāi)dev-server監(jiān)聽(tīng)的端口，例如：localhost:8080var opn = require('opn')var path = require('path')var express = require('express')var webpack = require('webpack')// http-proxy-middleware是一個(gè)express中間件，用于將http請(qǐng)求代理到其他服務(wù)器// 例：localhost:8080/api/xxx --> localhost:3000/api/xxx// 這里使用該插件可以將前端開(kāi)發(fā)中涉及到的請(qǐng)求代理到提供服務(wù)的后臺(tái)服務(wù)器上，方便與服務(wù)器對(duì)接var proxyMiddleware = require('http-proxy-middleware')// 開(kāi)發(fā)環(huán)境下的webpack配置var webpackConfig = require('./webpack.dev.conf')// dev-server 監(jiān)聽(tīng)的端口，如果沒(méi)有在命令行傳入端口號(hào)，則使用config.dev.port設(shè)置的端口，例如8080var port = process.env.PORT || config.dev.port// 用于判斷是否要自動(dòng)打開(kāi)瀏覽器的布爾變量，當(dāng)配置文件中沒(méi)有設(shè)置自動(dòng)打開(kāi)瀏覽器的時(shí)候其值為 falsevar autoOpenBrowser = !!config.dev.autoOpenBrowser// HTTP代理表，指定規(guī)則，將某些API請(qǐng)求代理到相應(yīng)的服務(wù)器var proxyTable = config.dev.proxyTable// 創(chuàng)建express服務(wù)器var app = express()// webpack根據(jù)配置開(kāi)始編譯打包源碼并返回compiler對(duì)象var compiler = webpack(webpackConfig)// webpack-dev-middleware將webpack編譯打包后得到的產(chǎn)品文件存放在內(nèi)存中而沒(méi)有寫進(jìn)磁盤// 將這個(gè)中間件掛到express上使用之后即可提供這些編譯后的產(chǎn)品文件服務(wù)var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, // 設(shè)置訪問(wèn)路徑為webpack配置中的output里面所對(duì)應(yīng)的路徑 quiet: true // 設(shè)置為true，使其不要在控制臺(tái)輸出日志})// webpack-hot-middleware，用于實(shí)現(xiàn)熱重載功能的中間件var hotMiddleware = require('webpack-hot-middleware')(compiler, { log: false, // 關(guān)閉控制臺(tái)的日志輸出 heartbeat: 2000 // 發(fā)送心跳包的頻率})// webpack(重新)編譯打包完成后并將js、css等文件inject到html文件之后，通過(guò)熱重載中間件強(qiáng)制頁(yè)面刷新compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {  hotMiddleware.publish({ action: 'reload' })  cb() })})// 根據(jù) proxyTable 中的代理請(qǐng)求配置來(lái)設(shè)置express服務(wù)器的http代理規(guī)則Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] // 格式化options，例如將'www.example.com'變成{ target: 'www.example.com' } if (typeof options === 'string') {  options = { target: options } } app.use(proxyMiddleware(options.filter || context, options))})// handle fallback for HTML5 history API// 重定向不存在的URL，用于支持SPA（單頁(yè)應(yīng)用）// 例如使用vue-router并開(kāi)啟了history模式app.use(require('connect-history-api-fallback')())// serve webpack bundle output// 掛載webpack-dev-middleware中間件，提供webpack編譯打包后的產(chǎn)品文件服務(wù)app.use(devMiddleware)// enable hot-reload and state-preserving// compilation error display// 掛載熱重載中間件app.use(hotMiddleware)// serve pure static assets// 提供static文件夾上的靜態(tài)文件服務(wù)var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)app.use(staticPath, express.static('./static'))// 訪問(wèn)鏈接var uri = 'http://localhost:' + port// 創(chuàng)建promise，在應(yīng)用服務(wù)啟動(dòng)之后resolve// 便于外部文件require了這個(gè)dev-server之后的代碼編寫var _resolvevar readyPromise = new Promise(resolve => { _resolve = resolve})console.log('> Starting dev server...')// webpack-dev-middleware等待webpack完成所有編譯打包之后輸出提示語(yǔ)到控制臺(tái)，表明服務(wù)正式啟動(dòng)// 服務(wù)正式啟動(dòng)才自動(dòng)打開(kāi)瀏覽器進(jìn)入頁(yè)面devMiddleware.waitUntilValid(() => { console.log('> Listening at ' + uri + '/n') // when env is testing, don't need open it if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {  opn(uri) } _resolve()})// 啟動(dòng)express服務(wù)器并監(jiān)聽(tīng)相應(yīng)的端口var server = app.listen(port)// 暴露本模塊的功能給外部使用，例如下面這種用法// var devServer = require('./build/dev-server')// devServer.ready.then(() => {...})// if (...) { devServer.close() }module.exports = { ready: readyPromise, close: () => {  server.close() }}