在新版本的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文件的更多相关文章

  1. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  2. JavaScript进阶(二)在一个JS文件中引用另一个JS文件

    在一个JS文件中引用另一个JS文件       转载地址:http://blog.csdn.net/zndxlxm/article/details/7875787 方法一 在调用文件的顶部加入下例代码 ...

  3. 在VS中让一个JS文件智能提示另一个JS文件中的成员2--具体引用

    我们知道,在html中,利用<script language="javascript" type="text/javascript" src=" ...

  4. 在VS中让一个JS文件智能提示另一个JS文件中的成员

    “在VS中如何让一个JS文件智能提示另一个JS文件中的成员” 有时候会有这种情况:当我的一个Web页面引用了两个JS文件(假如分别叫common.js和JScript1.js),如果JScript1. ...

  5. vue cli创建脚手架

    1.用vscode打开一个文件夹.在菜单栏 点击 查看-集成终端.这里可以用其他的方法比如cmd命令符调开这个界面,但是要用cd 切到要放文件的文件夹下. 2.安装好node.js  和淘宝镜像 3. ...

  6. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  7. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  8. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

  9. vue-pdf的3.3.1版本build后多生成168个js文件

    当同事使用vue-pdf来浏览pdf之后,就发现build之后一堆散乱的js文件,真可怕! 果然google之后是它的原因.参考:Vue-pdf create 168 excess bundles i ...

  10. vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)

    文章目录 1.实现的效果 2.编写的js文件(这里写在了api文件下) 3.在vue页面中引入(script) 4.页面代码 1.实现的效果 20220606_154646 2.编写的js文件(这里写 ...

随机推荐

  1. Python_for语句

    1.for语句: myuser={ 'id':1, 'name':'张三', '语文':98, '数学':99, '英语':40 } for key in myuser: print('学生的'+ke ...

  2. reGeorg+Proxifier使用

    reGeorg利用了socks5协议建立隧道,结合Proxifier可将目标内网代理出来. 项目地址: https://github.com/sensepost/reGeorg 该文件下支持php,a ...

  3. 应用在Windows系统中的自动化部署实践

    因为公司的产品有linux 和windows两套部署环境,领导安排我先来做windows的自动化部署.由于本人对windows 的dos命令基本没啥概念,所以在最终完成之前,走了很多弯路,在这里记载下 ...

  4. 【转】angular使用代理解决跨域

    原文:https://www.cnblogs.com/sghy/p/9111293.html ----------------------------------------------------- ...

  5. vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

    默认,webpack无法打包.vue文件,需要安装 相关的loader: cnpm i vue-loader vue-template-compiler -D 提示以下错误信息: Module Err ...

  6. pandas 4

    参考资料:https://mp.weixin.qq.com/s/QnxaOrvlWJn6Dr42Ic1CcQ 1  #只选取housing,loan,contac和poutcometest_data[ ...

  7. vue npm,Git随笔

    下载模块: npm install <package-name>  --save-dev 上线: npm run build 基本使用流程:1. npm install vue-cli - ...

  8. feign.RetryableException: Read timed out executing xxx

    feign.RetryableException: Read timed out executing GET http://common-item/service/item/selectTbItemA ...

  9. 007_项目制作拍摄视频篇之_《基于ARM与ZigBee的实验室签到系统》

    研究的背景和意义: 随着社会生活节奏的加快,科技日新月异,信息更新迅速,人们之间的交流也变得越来越频繁,社会群体乃至政府之间的交流也朝着轻松.快速.容易管理和控制的方向发展,这种信息交流方式已经逐步得 ...

  10. 通过反射获取DataSource里数据源的账号密码

    public Connection getDbConnection() { Connection conn = null; // 获得连接 DataSource ds = null; try { Co ...