本地开发一般通过执行 npm run serve 命令来启动项目,那这行命令到底存在什么魔法?我们来一探究竟。

根据这篇文章思路:使用vue-cli初始化后运行npm run server到底干了什么
得知,npm run serve 实际上会执行 vue-cli-service serve(该文件位于 node_modules.binue-cli-service.cmd),查看该文件,发现最终会执行 node vue-cli-service.js serve(该文件位于 node_modules@vuecli-serviceinue-cli-service.js)。
vue-cli-service.js就是我们的切入口。
关键代码:

const Service = require('../lib/Service')
//...
const service = new Service(...
//...
service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

根据这篇文章思路:vue-cli系列之vue-cli-service整体架构浅析
实际执行的文件为 serve.js(该文件位于 node_modules@vuecli-servicelibcommandsserve.js
关键代码:

const WebpackDevServer = require('webpack-dev-server')
//...
const webpackConfig = api.resolveWebpackConfig()
//...
const compiler = webpack(webpackConfig)
const server = new WebpackDevServer(compiler, ...
//...
server.listen(port, host, err => {
  if (err) {
    reject(err)
  }
})

可以很清楚的看到,serve.js 中使用了 webpack-dev-server 作为http服务器,启动并监听端口提供服务(不知道webpack-dev-server的话可以暂且将它理解为 nginx)。
这么下来,思路就清晰了,npm run serve 最最终的目的就是启动一个 webpack-dev-server服务器
webpack-dev-server原生的配置繁多,学习成本不小,既然vue-cli将webpack-dev-server集成到脚手架中,那一定是帮我们做了很多事情。列举几个点:

  1. 主页面
    WebpackDevServer构造器第二个入参,historyApiFallback属性 -> genHistoryApiFallbackRewrites,设置了根路径会重定向到 index.html(即为主页面)。

  2. 入口文件
    WebpackDevServer构造器第一个入参 -> webpackConfig -> Service.resolveWebpackConfig -> resolveChainableWebpackConfig -> webpackChainFns
    追踪 webpackChainFns 的来源,可以发现 base.js (node_modules@vuecli-servicelibconfigase.js)会设置 ./src/main.js 为入口文件。

    webpackConfig
    .mode(‘development’)
    .context(api.service.context)
    .entry(‘app’)
    .add(’./src/main.js’)

等等等等…
另外,我们在vue.config.js上的配置或多或少都会映射到webpack-dev-server的配置上。这个当然就要参看vue.config.js的文档啦。

小结

  1. 命令依赖链:npm run serve -> node_modules.binue-cli-service.cmd serve -> node node_modules@vuecli-serviceinue-cli-service.js serve
  2. vue-cli 的开发环境实际上使用了 webpack-dev-server 模块实现。
  3. vue.config.js 的配置会作用到 webpack-dev-server 上。

references:
vue-cli-service serve 官方文档
vue.config.js 官方文档
Webpack 官方文档
Webpack DevServer 官方文档
vue-cli系列之vue-cli-service整体架构浅析
使用vue-cli初始化后运行npm run server到底干了什么

Logo

前往低代码交流专区

更多推荐