• 为什么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 + '
    ')
        // 当环境为测试环境或者设置了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

  • 相关阅读:
    JS产生随机数的几个用法!
    title与alt的区别
    jquery select取值,赋值操作
    DIV+CSS中标签dl dt dd常用的用法
    vi/vim键盘图
    win7系统注册表的权限修改
    win7 链接打印机时提示未知的用户名或错误密码
    关于无法把程序(Adobe Fireworks CS5)添加到打开方式的解决办法
    把网页发送到桌面代码
    iframe多层嵌套时获取元素总结
  • 原文地址:https://www.cnblogs.com/shy1766IT/p/11107882.html
Copyright © 2020-2023  润新知