Vue进阶（五十四）：vue-cli 脚手架 dev-server

最新推荐文章于 2024-08-07 23:48:41 发布

原创

最新推荐文章于 2024-08-07 23:48:41 发布 · 744 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细解析了Vue CLI中的dev-server配置，包括使用connect-history-api-fallback处理路由重定向，通过webpack-dev-middleware实现热更新，以及webpack-hot-middleware保持状态的编译错误显示。同时，介绍了如何设置静态资源目录，并在开发环境中监听服务器启动及自动打开浏览器。通过对关键代码的解释，帮助读者深入理解Vue CLI的开发服务器工作方式。

app.use(require(‘connect-history-api-fallback’)())

// serve webpack bundle output
// app.use是在响应请求之前执行的，用来指定静态路径，挂载静态资源
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)

// serve pure static assets
// 下面的staticPath是 static ，path.posix.join其他配置文件中我已经介绍了，这里不再赘述
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 挂载静态资源，下面的方法是用虚拟目录来访问资源，staticPath就是虚拟目录路径，其实不管设不设置都是static
app.use(staticPath, express.static(‘./static’))
// 下面结果就是 ‘http://localhost:8080’
var uri = ‘http://localhost:’ + port

// 下面是es6的promise规范，用来处理嵌套请求的
var _resolve
var readyPromise = new Promise(resolve => {
_resolve = resolve // resolve是一个回调函数专门用来传递成功请求的数据
})
// 下面是加载动画
console.log(‘> Starting dev server…’)
// waitUntilValid是webpack-dev-middleware实例的方法，在编译成功之后调用
devMiddleware.waitUntilValid((