为什么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文件(这里写 ...
随机推荐
- OpenStack环境搭建
实验环境 CentOS-7-x86_64-Minimal-1708.iso openstack_N.tar.gz 创建虚拟机 controller部署 computer网络配置 OpenStack环境 ...
- CentOS8 NextCloud 私有云存储搭建
本文首发:https://www.somata.work/2019/CentOS8NextCloudBuild.html 之前发现 Owncloud 越来越捞了,推出了企业版和社区版,近几日突然发现原 ...
- MySQL远程连接错误解决
远程连接服务器的MySQL数据库,错误代码是1130,是由于无法给远程连接的用户权限的问题 解决方法: 本机登陆mysql后,将mysql数据库中的user表中的host项,从localhost改为% ...
- 使用Topshelf创建Windows服务[转载]
概述 Topshelf是创建Windows服务的另一种方法,老外的一篇文章Create a .NET Windows Service in 5 steps with Topshelf通过5个步骤详细的 ...
- Session&Cookie&localStorage浅谈
Session&Cookie&localStorage 领导让我开发一个有两张信息表单需要提交页面的网站,我作为一名开发人员,这个需求太简单了,和领导说直接存session sessi ...
- unity里blit的load store action设置
做blit的 load store action时 用 setrendertarget做 之后blit 参数用 BuiltinRenderTextureType.CurrentActive https ...
- linux 安装MySql 5.7.20 操作步骤【亲测】
一. #卸载系统自带的Mariadb[root@master ~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64[root@ ...
- CSS float详解
前言:在我们写CSS样式的时候,float,position,display,overflow这几个关键字用得比较多. 弄清楚他们之间的原理,我们可以更高效的写出我们想要的布局. 作者:Ry-yuan ...
- Django REST framework+Vue 打造生鲜电商项目(笔记八)
(form:http://www.cnblogs.com/derek1184405959/p/8862569.html) 十一.pycharm 远程代码调试 第三方登录和支付,都需要有服务器才行(回调 ...
- ubuntu下新立得(synaptic)软件包管理器安装
1.从ubuntu下的软件中心(面板主页中输入soft即可找到)搜索安装synaptic后,打开新立得一闪就自动关了.解决办法为: 1.1命令行下卸载,命令行下重新安装: 卸载: #purge表示卸载 ...