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配置