vue-cli3之@vue/cli-service

@vue/cli-service

我们使用vue-cli3来创建的项目中，我们会发现在package.json的script字段里面会有如下信息

 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint"

注：在package.json中script字段指定了运行脚本命令的npm行的缩写，在上述的script字段里代表的意思就是执行npm run serve / npm run build / npm run lint /命令相当于执行vue-cli-service serve / vue-cli-service build /vue-cli-service lit。

那么vue-cli-serve 执行了怎样的命令，怎么实现这些命令的呢？我们需要知道vue-cli-service是什么。

从vue-cli官方文档中我们知道在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

vue-cli-service serve

用法：
vue-cli-service serve [options] [entry]
选项(options)：
--open:在服务器启动时，打开浏览器
--copy:在浏览器启动时，将URL复制到剪贴板
--mode:指定环境模式(默认值是development)
--host:指定host(默认是0.0.0.0)
--prot:指定prot(默认是8080)
--https:使用https(默认是false)

vue-cli-service serve命令会启动一个一个开发服务器(基于webpack-dev-serve)并附带开箱即用的模块热重载，除了通过命令行，还可以使用vue.config.js里面的devServe来配置开发服务器。

命令行参数[entry]将会指定为唯一入口，而不是附加入口，尝试使用[entry]覆盖config.page中的entry将会引发错误

vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]

选项：

  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      构建两个版本的 js 包：一个面向支持现代浏览器的原生 ES2015+ 包，以及一个针对其他旧浏览器的包。
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

vue-cli-service lint

用法：vue-cli-service inspect [options] [...paths]

选项：

  --mode    指定环境模式 (默认值：development)

您可以使用vue-cli-service inspect来审查一个Vue CLI项目的webpack配置