20181126——Vue中npm run dev和npm run build

最新推荐文章于 2025-06-26 14:06:50 发布

原创最新推荐文章于 2025-06-26 14:06:50 发布 · 638 阅读

0 ·

CC 4.0 BY-SA版权

本文解析了npm rundev命令执行的build/dev-server.js文件的主要功能，包括检查node和npm版本，创建express服务器和webpack编译器，配置开发与热重载中间件，挂载代理服务，配置静态资源，启动服务器并监听8080端口，自动打开浏览器访问localhost:8080。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

├─build
│ ├─build.js
│ ├─check-versions.js
│ ├─dev-client.js
│ ├─dev-server.js
│ ├─utils.js
│ ├─vue-loader.conf.js
│ ├─webpack.base.conf.js
│ ├─webpack.dev.conf.js
│ ├─webpack.prod.conf.js
│ └─webpack.test.conf.js
├─config
│ ├─dev.env.js
│ ├─index.js
│ ├─prod.env.js
│ └─test.env.js
├─…
└─package.json
以上是关于bulid与run的所有文件

那npm run dev 执行的文件build/dev-server.js文件，到底执行了什么

检查node和npm的版本
引入相关插件和配置
创建express服务器和webpack编译器
配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）
挂载代理服务和中间件
配置静态资源
启动服务器监听特定端口（8080）
自动打开浏览器并打开特定网址（localhost:8080）

说明： express服务器提供静态文件服务，不过它还使用了http-proxy-middleware，一个http请求代理的中间件。前端开发过程中需要使用到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。