为什么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文件(这里写 ...
随机推荐
- [dev][ipsec][esp] ipsec链路中断的感知问题
ipsec如何感知到链路中断了?以下内容讲的是在没有配置DPD,且没有rekey的场 景下. 1. ESP认为,以下两个场景交由应用层来感知,应用层会发现ipsec的连接坏掉了. a,ESP承载的连接 ...
- Go语言中Goroutine的设置
一. 通过runtime包进行多核设置 1.NumCPU()获取当前系统的cpu核数 2.GOMAXPROCS设置当前程序运行时占用的cpu核数 版本1.6之前默认是使用1个核,而之后是全部使用. 好 ...
- 云计算---openstack创建虚拟机过程
虚拟机创建过程: (1)界面或命令行通过RESTful API向keystone获取认证信息.(2)keystone通过用户请求认证信息,并生成auth-token返回给对应的认证请求.(3)界面或 ...
- ui自动化测试 SeleniumBase
ui自动化 SeleniumBase SeleniumBase是一个自动化web测试框架,它的设计pyse相似,基于selenium和unittest封装的框架,api多,支持命令行多参数执行 文档地 ...
- QQ龙虎榜数据接口
1.个股全部上榜日期 strUrl.Format(L"http://stock.finance.qq.com/cgi-bin/sstock/q_lhb_js?t=1&c=%06d&q ...
- glog的安装使用
参考 :https://blog.csdn.net/Pig_Pig_Bang/article/details/81632962 https://blog.csdn.net/cywtd/article/ ...
- input 限制输入数字和小数
//input 限制输入数字和小数 <input type="text" name="demo" value="" onkeyup=& ...
- struts2--入
Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互. struts ...
- Nginx 负载均衡条件下 Tomcat 共享Session (Java)(一)
1.修改tomcat 下 conf/context.xml 在</Context>里面加入以下代码 <Valve className="com.orangefunctio ...
- 学习了武沛齐讲的Day11-完
DAY11 老师讲了很多,理解了一个方法 当有复杂的问题时,先拆解很小的单元(10行),测试通过了,再简化(3行) len range 感悟:其实不用计记代码(主要是记不动),,当遇到问题时:找出 ...