vue3前端青铜到黄金王者 #13 vue-cli-service是啥（上）

前篇我们解析了一下Vue3项目的构成，修改了一下组件的代码。

效果如下， 我们也在package.json看到vue-cli-service, 这个到底是啥？我们一起看看。

vue-cli-service是什么？

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

简单理解就是一个构建(build)编译vue项目的工具，还提供了服务页面渲染的功能（serve)

vue-cli-service build

运行一下可以看到有下面选项，它的功能就是把vue源码编译为静态页面输出到dest指定的目录。通常是dist目录。

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

选项：

  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

我们运行一下yarn build看一下。

效果很直观。

dist目录里面真的是编译好的页面吗？ 我们看看。

如下图所示，确实没有任何.vue文件，只有css/html/js 还有图片，map文件等等。

总结

vue提供了vue-cli-sevice 工具方便了我们快速的构建项目。

build构建运行后输出到dist的文件可以直接放到服务器上面渲染的！

今天就写到这里。

我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢