vue-cli 和 vue-cli-service 都有哪些区别？

Posted 2023-02-22

【中文标题】vue-cli 和 vue-cli-service 都有哪些区别？

【英文标题】：Which are the differences between vue-cli and vue-cli-service?vue-cli 和 vue-cli-service 有哪些区别？

【发布时间】：2019-06-12 09:44:26

【问题描述】：

我使用 Vue 已经有一段时间了，但我刚刚开始使用 CLI，我有点困惑。

我安装了@vue/cli，如果我在命令行中输入vue，我会得到：

Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  upgrade [semverLevel]                      upgrade vue cli service / plugins (default semverLevel: minor)
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.

我使用vue 创建了一个项目，但由于某种我不记得的原因，我需要安装@vue/cli-service-global。

然而，在那之后，我注意到：

'vue-cli-service' is not recognized as an internal or external command

那是因为我必须安装@vue/cli-service。现在，当我在命令行中输入vue-cli-service 时，我得到：

  Usage: vue-cli-service <command> [options]

  Commands:

    serve     start development server
    build     build for production
    inspect   inspect internal webpack config

  run vue-cli-service help [command] for usage of a specific command.

---

显然，我可以使用这两种 CLI 工具进行构建、服务和检查。我的问题是 - 它们之间有什么区别？ @vue/cli 和 @vue/cli-service 的自述文件都只有一个指向 this page 的链接，其中没有给出该问题的答案。

我可以用一个我不能用另一个做什么？两者都需要吗？

【参考方案1】：

@vue/cli-service-global 是一个允许您运行vue serve 和vue build 的包没有任何本地依赖项。

@vue/cli-service 是一个真正执行 vue serve 和 vue build 的包，@vue/cli-service-global 和 @vue/cli 都依赖于它。

如果您使用的是@vue/cli，那么您不需要单独安装另外两个，因为它的依赖项中已经有@vue/cli-service。

---

补充：为了确定，我会再解释一下：

@vue/cli：

add、create、config、ui等命令 build 和serve 命令通过@vue/cli-service-global 包 inspect 命令通过@vue/cli-service 包（本地依赖）

@vue/cli-service-global：

build、inspect 和 serve 命令通过 @vue/cli-service 包

@vue/cli-service：

build、inspect 和 serve 命令

因此，您只需安装@vue/cli 并删除其他两个。

---

补充：关于使用vue-cli-service的说明： 当您使用vue create 命令创建项目时，@vue/cli 会链接到已创建项目的./node_modules/.bin 内的vue-cli-service 二进制文件。

那么你可以这样使用它：

在npm 脚本中直接以vue-cli-service 访问它（package.json）：

"scripts": 
  "watch": "vue-cli-service build --watch"

从外壳访问它：./node_modules/.bin/vue-cli-service build --watch。 您甚至可以将./node_modules/.bin 添加到您的shell PATH 中，并以vue-cli-service 的身份直接从shell 访问它。

【讨论】：

不完全。当我安装cli 时，我无法使用vue-cli-service。我也需要全局安装cli-service，这样我才能使用vue-cli-service build --watch，因为vue build --watch 告诉我watch 是一个未知选项。我不认为cli 只是使用cli-service 的命令。看起来不是这样。即使它们是相互依赖的——为什么我能够独立使用它们？不应该只有cli 与vue 一起使用吗？你能扩展一下吗？

@HristiyanDodov 啊，我明白了。我已经用其他信息更新了我的答案。

@HristiyanDodov 我的回答有误。 @vue/cli 通过@vue/cli-service-global 使用build/serve，通过@vue/cli-service 使用它们。

所以基本上，cli-service 具有核心构建功能，cli-service-global 允许您在没有本地依赖项的情况下运行命令，cli 是 cli-service 的包装器，具有用于创建项目的附加功能和配置东西？