为什么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