爲何vue-cli建立的build文件下沒有dev-server.js文件

在新版本的Vue開發中，經過vue-cli建立的build文件夾下面已經沒有了舊版本中的dev-server.js文件新版本的vue已將dev-server.js與webpack.dev.conf.js合併，若要寫路由相關配置須要找到webpack.dev.conf.js中的devServer對象進行相關配置

 

在dev-server.js文件中，主要作了如下幾項配置

• 檢查npm與node的版本
• 引入相關插件和配置
• 建立express服務器和webpack編譯器
• 配置開發中間件（webpack-dev-middleware）和熱重載中間件（webpack-hot-middleware）
• 掛載代理服務和中間件
• 配置靜態資源
• 啓動服務器監聽特定端口（8080）
• 自動打開瀏覽器並打開特定網址（localhost:8080）

require('./check-versions')()
// 獲取webpack相關配置
var config = require('../config')
  // 若是沒有經過DefinePlugin設置全局process.env字段，那麼默認爲開發環境
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
// opn能夠跨平臺打開網站、文件、可執行文件。
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
  // 若是發生了跨域的狀況，能夠經過http-proxy-middleware這個中間件進行反向代理，解決跨域問題
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')
// 獲取端口
var port = process.env.PORT || config.dev.port
  // 配置是否自動打開瀏覽器
var autoOpenBrowser = !!config.dev.autoOpenBrowser
  // 獲取須要轉發的接口
var proxyTable = config.dev.proxyTable
var app = express()
// 將webpack的開發環境設置放入webpack中，啓動編譯
var compiler = webpack(webpackConfig)
// 引入"webpack-dev-middleware"中間件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  // 設置中間件的公共路徑，值與webpack的公共路徑相同
  // 這個路徑就是內存中存儲的文件所在的路徑
  publicPath: webpackConfig.output.publicPath,
  // 不在控制檯顯示任何信息
  quiet: true
})
// 引入"webpack-hot-middleware"中間件
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {}
})
// 設置回調來訪問編譯對象
compiler.plugin('compilation', function(compilation) {
  // 設置回調來訪問html-webpack-plugin的after-emit（發射後）鉤子
  compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
    // 發佈熱重載事件並傳入一個對象，在dev-client.js中能夠subscribe到這個對象
    hotMiddleware.publish({ action: 'reload' })
    // 因爲after-emit階段是異步的，因此必須設置一個回調函數並調用它
    cb()
  })
})
// 遍歷反向代理的配置，利用proxyMiddleware進行反向代理
Object.keys(proxyTable).forEach(function(context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())
// 將暫存在內存中的webpack編譯後的文件掛載到實例上
app.use(devMiddleware)
// 將熱重載掛載到實例上並輸出相關狀態和編譯錯誤
app.use(hotMiddleware)
// 獲取配置中的靜態資源絕對路徑
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
  // 當開發環境中若是遇到了路徑爲staticPath的資源，那麼到./static中引用該資源
app.use(staticPath, express.static('./static'))
var uri = 'http://localhost:' + port
var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})
console.log('> Starting dev server...')
  // 當編譯生效的時候執行回調函數
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
    // 當環境爲測試環境或者設置了autoOpenBrowser的時候，打開以前設定好的地址
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve()
})
// 監聽端口
var server = app.listen(port)
module.exports = {
  ready: readyPromise,
  close: () => {
    server.close()
  }
}

// //跨域訪問
// app.all('*', function(req, res, next) {
// res.header("Access-Control-Allow-Origin", "*");
// res.header("Access-Control-Allow-Headers", "X-Requested-With");
// res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
// res.header("X-Powered-By",' 3.2.1')
// res.header("Content-Type", "application/json;charset=utf-8");
// next();
// })

 

vue-cli中webpack配置之dev-server.js   https://www.jianshu.com/p/b321a5c90754