为什么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
为什么vue-cli创建的build文件下没有dev-server.js文件的更多相关文章
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- JavaScript进阶(二)在一个JS文件中引用另一个JS文件
在一个JS文件中引用另一个JS文件 转载地址:http://blog.csdn.net/zndxlxm/article/details/7875787 方法一 在调用文件的顶部加入下例代码 ...
- 在VS中让一个JS文件智能提示另一个JS文件中的成员2--具体引用
我们知道,在html中,利用<script language="javascript" type="text/javascript" src=" ...
- 在VS中让一个JS文件智能提示另一个JS文件中的成员
“在VS中如何让一个JS文件智能提示另一个JS文件中的成员” 有时候会有这种情况:当我的一个Web页面引用了两个JS文件(假如分别叫common.js和JScript1.js),如果JScript1. ...
- vue cli创建脚手架
1.用vscode打开一个文件夹.在菜单栏 点击 查看-集成终端.这里可以用其他的方法比如cmd命令符调开这个界面,但是要用cd 切到要放文件的文件夹下. 2.安装好node.js 和淘宝镜像 3. ...
- Vue CLI 创建项目
使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
- vue-pdf的3.3.1版本build后多生成168个js文件
当同事使用vue-pdf来浏览pdf之后,就发现build之后一堆散乱的js文件,真可怕! 果然google之后是它的原因.参考:Vue-pdf create 168 excess bundles i ...
- vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
文章目录 1.实现的效果 2.编写的js文件(这里写在了api文件下) 3.在vue页面中引入(script) 4.页面代码 1.实现的效果 20220606_154646 2.编写的js文件(这里写 ...
随机推荐
- Python面向对象之进阶
一.property 内置函数 装饰器的使用:所有的装饰器函数.方法.类的上一行直接@装饰器的名字 装饰器的分类: ① 装饰函数 ② 装饰方法 ③ 装饰类 property 是一个装饰器函数 @pro ...
- IP地址简介及Linux网络管理工具
IP地址简介 IP地址又叫网络地址也称逻辑地址,由32位2进制数组成,分4段每段8位,由10进制数表示,范围0~,段与段之间用点隔开采用点分十进制的表示法,在一个网络中ip地址是唯一的,IP地址最主要 ...
- IAR建立stm32工程
stm32是一个当下非常流行的微控制器,很多人都加入了学习stm32的行列中,常用的stm32编译器有IAR和mdk两种,接下来是利用stm32固件库3.5在IAR下的建立的工程模板历程: 1.在常用 ...
- You are what you say!
说话的方式表现了你的角色,所以说话的口吻在不同场合要贴合自己的身份和角色 尖锐的问题:如果要说一个比较尖锐的问题,那么可以把这个问题推理一下,从比较生活化的一点开始,或者将问题推给虚拟的第三方(但是注 ...
- Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转
今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...
- Python笔记(30)-----logger
转自: https://www.jb51.net/article/139080.htm logging模块介绍 Python的logging模块提供了通用的日志系统,熟练使用logging模块可以方便 ...
- 新闻系统——VS制作自己的模板
我们在做机房管理的项目时,就用过模板方法,建立一个模板,这样就会省很多事,我们不需要每次都添加同样的东西,比如我们的类窗体,就可以制作一个模板,将注释和需要引用的控件直接添加上,这可以省去很大的麻烦, ...
- burp插件debug
java -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5005 -jar burpsuite_community_v2. ...
- 使一个div元素上下左右居中
第一种方法 浮动流自我调节 .box{ widht:200px; height:200px; position:relative; } .box .son{ width:100px; height:1 ...
- POJ2482 Stars in Your Window 和 test20180919 区间最大值
Stars in Your Window Language:Default Stars in Your Window Time Limit: 1000MS Memory Limit: 65536K T ...