vue-cli脚手架npm相关文件解读(7)dev-server.js
系列文章传送门:
1、build/webpack.base.conf.js
2、build/webpack.prod.conf.js
3、build/webpack.dev.conf.js
4、build/utils.js
5、build/vue-loader.conf.js
6、build/build.js
7、build/dev-server.js
8、build/check-versions.js
9、../config/index.js
下面是build/dev-server.js中相关代码和配置的说明
项目地址:https://github.com/SmileSmith(感觉不错的话帮忙打个星哈 ~)
/** npm run dev 调试执行文件,主要用于开发环境* 建议先查阅webapck.dev.conf.js ../config/index.js */// npm和node版本检查 require('./check-versions')()var config = require('../config') // 下面表示如果如果没有定义全局变量NODE_ENV,则将NODE_ENV设置为"development" if (!process.env.NODE_ENV) {process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) }var opn = require('opn') // opn插件是用来打开特定终端的,此文件用来在默认浏览器中打开链接 opn(url) var path = require('path') var express = require('express') // nodejs开发框架express,用来简化操作,可以当做一个功能强大的http-server var webpack = require('webpack') var proxyMiddleware = require('http-proxy-middleware') // http中间代理插件,此插件是用来代理请求的只能用于开发环境,目的主要是解决跨域请求后台api var webpackConfig = process.env.NODE_ENV === 'testing'? require('./webpack.prod.conf'): require('./webpack.dev.conf')// default port where dev server listens for incoming traffic // 下面是express监听的端口号,因为没有设置process.env.PORT,所以下面监听的就是config.dev.port即8080 // 需要自定义设置端口号,可以修改根目录下的package.json中的dev脚本,加上 set PORT=端口号&& var port = process.env.PORT || config.dev.port // automatically open browser, if not set will be false // 默认打开浏览器,!!强制转成Boolean值,防止后续用到这个变量的地方可能出问题 var autoOpenBrowser = !!config.dev.autoOpenBrowser // Define HTTP proxies to your custom API backend // https://github.com/chimurai/http-proxy-middleware // 配置反向代理的配置数据 var proxyTable = config.dev.proxyTable// 创建express实例 var app = express() // ※※※ Use express.Router to mock api by SmileSmith ※※※ // ※※※ 用express的router方法来mock发布一些资源 ※※※ var mockRoutes = express.Router() mockRoutes.post('/getCurrentPeroid', function (req, res) {res.json({errno: 0 ,data: require('../mock/data.currentperoid.json')}); }) app.use('/api', mockRoutes) //api开头的请求用mock数据返回// 把配置参数传递到webpack方法中,返回一个编译对象,这个编译对象上面有很多属性,建议看webpack官方文档 // 这里主要是用到里面的状态函数 如compilation,compile,after-emit这类的 var compiler = webpack(webpackConfig)// 下面是webpack-dev-middleware和webpack-hot-middleware两兄弟,这两个是黄金组合 var devMiddleware = require('webpack-dev-middleware')(compiler, {publicPath: webpackConfig.output.publicPath, // 以webpack编译后的内容处理发布地址(/)的请求quiet: true // 使用friendly-errors-webpack-plugin插件这个必须设置为true,具体看wepback-dev-config.js })var hotMiddleware = require('webpack-hot-middleware')(compiler, {log: () => {} }) // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', function (compilation) {compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { // webpack任何插件都可以使用这种方式,里面可以传递钩子函数,用来在插件各个阶段做特殊处理,钩子函数种类很多hotMiddleware.publish({ action: 'reload' }) // 当插件html-webpack-plugin产出完成之后,强制刷新浏览器 cb()}) })// proxy api requests // 下面是代理表的处理方法,请关注../config/index.js中开发环境proxyTab中的配置 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 // 使用H5的history来做返回,而不是浏览器url // 用来解决单页面应用,点击刷新按钮和通过其他search值定位页面的404错误 app.use(require('connect-history-api-fallback')())// serve webpack bundle output // 让express用上webpack输出的模块中间件 app.use(devMiddleware)// enable hot-reload and state-preserving // compilation error display // 让express用上webpack输出的热加载中间件 app.use(hotMiddleware)// serve pure static assets // 让express用上webpack输出在static中的静态文件 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) app.use(staticPath, express.static('./static'))var uri = 'http://localhost:' + port // 这个port上面提到,默认8080//定义一个Promise用于返回,定义一个_resolve用于编译完成时的回调里面调用 var _resolve var readyPromise = new Promise(resolve => {_resolve = resolve })console.log('> Starting dev server...') // 等待模块编译完成就可以打开浏览器 devMiddleware.waitUntilValid(() => {console.log('> Listening at ' + uri + '\n')// when env is testing, don't need open itif (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {opn(uri)}_resolve() // readyPromise就可以返回resolve })// node.js监听端口 var server = app.listen(port)module.exports = {ready: readyPromise, // (其它人)调用ready(),就能拿到一个promise对象close: () => {server.close()} }
参考:http://www.cnblogs.com/ye-hcj/archive/2017/06.html
转载于:https://www.cnblogs.com/smileSmith/p/7424064.html
vue-cli脚手架npm相关文件解读(7)dev-server.js相关推荐
- 2021-10-27 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在
这里写自定义目录标题 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在 1 ...
- Vue2.x 核心基础(Vue概述,Vue基本使用,@vue/cli脚手架,Element-UI 的基本使用,Vue模板语法)
1. Vue概述 尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
- 猿创征文|【Vue五分钟】 Vue Cli脚手架创建一个项目
目录 前言 一.创建项目的操作步骤 选择路由模式 选择CSS预编译器 选择如何存放配置 自动下载项目所需的包文件 二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面 三.项目的 ...
- 如何查看vue版本号以及vue/cli脚手架版本号
查看vue版本号 方法一:直接在项目的package.json文件,找到dependencies就能看到了 方法二:输入命令npm ls vue (或者npm list vue) 查看vue/cli脚 ...
- Vue CLI脚手架新建项目
Windows PowerShell 版权所有(C) Microsoft Corporation.保留所有权利.安装最新的 PowerShell,了解新功能和改进!https://aka.ms/PSW ...
- vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。...
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
- vuecli启动的服务器位置,在vue cli 3生成的项目中启动dev服务器
我在我的Windows系统上使用全局安装了vue cli 3 npm i -g @vue/cli. 然后我使用生成了一个项目 vue create vue-project 我通过提示选择了所需的插件. ...
- Windows PowerShell安装指定版本vue/cli脚手架失效解决办法;vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue
mac搭建vue项目看这篇 打开shift--鼠标右键,就可以打开Windows PowerShell 1.安装vue/cli npm install -g @vue/cli@3.12.0 @后面是版 ...
- vue使用脚手架的单文件组件环境搭建
每一次新下载配置一个新的东西都会出现各种奇奇怪怪的问题,配置好几次,以此记录. 组件 把一个页面拆分成一堆组件,每个组件都有自己的html.css 作用:简化项目编程,复用编码,提高运行效率 单文件组 ...
- 前端框架vue04~~vue.cli脚手架的基本使用
文章目录 [1. Vue-CLI脚手架](https://cli.vuejs.org/zh/guide/) [2. 安装](https://cli.vuejs.org/zh/guide/install ...
最新文章
- C语言文件操作函数大全
- hdu 5534(dp)
- 一文看尽2018全年计算机视觉大突破
- JMeter学习笔记--JMeter常用测试元件
- mysql gz 安装_Linux下安装mysql 5.7.17.tar.gz的教程详解
- 吴恩达机器学习 Coursera 笔记(二) - 单变量线性回归...
- selenium_java
- MySQL架构体系(从一条语句出发了解MySQL各部分的作用)
- 杨振宁与清华计算机系,他放弃美国国籍,和杨振宁一起回国,让清华计算机系问鼎全球...
- 勒索病毒家族信息判断
- comsol和java_COMSOL java API——编译comsol模型java文件
- 黑客之门的魅力:感染与加载 [转]
- 弯管机编程软件电脑版_聚编程电脑版
- boobooke视频汇总
- 论文阅读笔记:Sequential Matching Network: A New Architecture for Multi-turn Response Selection in Retrieva
- mbp touchbar设置_macbookpro touchbar 怎么添加锁屏快捷键
- 微擎打开导航提示该网页无法正常运作
- String.prototype.padStart()
- Linux服务篇之远程访问及控制SSH
- C语言双引号A单引号A,C语言查漏补缺——单引号和双引号