为什么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文件(这里写 ...
随机推荐
- 前端BOM对象
location.href 查看当前的url location.href http://www.baidu.com 跳转URL location.reload 重载当前页面 windows.alert ...
- syzkaller安装
初始环境配置 sudo apt-get install subversion sudo apt-get install g++ sudo apt-get install git sudo apt in ...
- Linux网络编程综合运用之MiniFtp实现(八)
上节中实现了"USER"和"PASS"命令,如下: 事实上FTP是有很多命令组成的,如果就采用上面的这种方法来实现的话,就会有很多if...else if语句, ...
- python(动态传参、命名空间、函数嵌套、global和nonlocal关键字)
一.函数的动态传参 1.*args位置参数动态传参 def chi(*food): print(food) chi("烧烤","火锅","虾吃虾涮&q ...
- linux crontab 鉴定令牌不再有效,需要新的鉴定令牌 [ You (root) are not allowed to access to (crontab) because of pam configuration.]
用户root 解决方法: 用root用户,执行 chage -M 99999 root 更改有效期为99999天.
- Parameter 0 of method redisTemplate in org.springframework.boot.autoconfigure.data.redis.RedisAutoConfiguration required a bean of type 'org.springframework.data.redis.connection.RedisConnectionFactor
Error starting ApplicationContext. To display the conditions report re-run your application with 'de ...
- ASP.NET 下配置请求大小、请求时间等参数
在邮件发送系统或者其他一些传送文件的网站中,用户传送文件的大小是有限制的,因为这样不但可以节省服务器的空间,还可以提高传送文件的速度.下面介绍如何在Web.Config文件中配置限制上传文件大小与时间 ...
- prometheus-alertmanager告警推送到钉钉
1. Prometheus告警简介 告警能力在Prometheus的架构中被划分成两个独立的部分.如下所示,通过在Prometheus中定义AlertRule(告警规则),Prometheus会周期性 ...
- 41、扩展原理-ApplicationListener用法
41.扩展原理-ApplicationListener用法 ApplicationListener 监听容器中发布的事件.事件驱动模型开发: public interface ApplicationL ...
- spark的广播变量
直接上代码:包含了,map,filter,persist,mapPartitions等函数 String master = "spark://192.168.2.279:7077" ...