Vue CLI 服務(wù)

使用命令

在一個(gè) Vue CLI 項(xiàng)目中，@vue/cli-service 安裝了一個(gè)名為 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問(wèn)這個(gè)命令。

這是你使用默認(rèn) preset 的項(xiàng)目的 package.json：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

你可以通過(guò) npm 或 Yarn 調(diào)用這些 script：

npm run serve
# OR
yarn serve

如果你可以使用 npx (最新版的 npm 應(yīng)該已經(jīng)自帶)，也可以直接這樣調(diào)用命令：

npx vue-cli-service serve

提示

你可以通過(guò) vue ui 命令使用 GUI 運(yùn)行更多的特性腳本。

這里有一個(gè) GUI 的 webpack Analyzer：

vue-cli-service serve

用法：vue-cli-service serve [options] [entry]

選項(xiàng)：

  --open    在服務(wù)器啟動(dòng)時(shí)打開(kāi)瀏覽器
  --copy    在服務(wù)器啟動(dòng)時(shí)將 URL 復(fù)制到剪切版
  --mode    指定環(huán)境模式 (默認(rèn)值：development)
  --host    指定 host (默認(rèn)值：0.0.0.0)
  --port    指定 port (默認(rèn)值：8080)
  --https   使用 https (默認(rèn)值：false)

vue-cli-service serve 命令會(huì)啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器 (基于 webpack-dev-server) 并附帶開(kāi)箱即用的模塊熱重載 (Hot-Module-Replacement)。

除了通過(guò)命令行參數(shù)，你也可以使用 vue.config.js 里的 devServer 字段配置開(kāi)發(fā)服務(wù)器。

命令行參數(shù) [entry] 將被指定為唯一入口，而非額外的追加入口。嘗試使用 [entry] 覆蓋 config.pages 中的 entry 將可能引發(fā)錯(cuò)誤。

vue-cli-service build

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

選項(xiàng)：

  --mode        指定環(huán)境模式 (默認(rèn)值：production)
  --dest        指定輸出目錄 (默認(rèn)值：dist)
  --modern      面向現(xiàn)代瀏覽器帶自動(dòng)回退地構(gòu)建應(yīng)用
  --target      app | lib | wc | wc-async (默認(rèn)值：app)
  --name        庫(kù)或 Web Components 模式下的名字 (默認(rèn)值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在構(gòu)建項(xiàng)目之前不清除目標(biāo)目錄
  --report      生成 report.html 以幫助分析包內(nèi)容
  --report-json 生成 report.json 以幫助分析包內(nèi)容
  --watch       監(jiān)聽(tīng)文件變化

vue-cli-service build 會(huì)在 dist/ 目錄產(chǎn)生一個(gè)可用于生產(chǎn)環(huán)境的包，帶有 JS/CSS/HTML 的壓縮，和為更好的緩存而做的自動(dòng)的 vendor chunk splitting。它的 chunk manifest 會(huì)內(nèi)聯(lián)在 HTML 里。

這里還有一些有用的命令參數(shù)：

• --modern 使用現(xiàn)代模式構(gòu)建應(yīng)用，為現(xiàn)代瀏覽器交付原生支持的 ES2015 代碼，并生成一個(gè)兼容老瀏覽器的包用來(lái)自動(dòng)回退。
• --target 允許你將項(xiàng)目中的任何組件以一個(gè)庫(kù)或 Web Components 組件的方式進(jìn)行構(gòu)建。更多細(xì)節(jié)請(qǐng)查閱構(gòu)建目標(biāo)。
• --report 和 --report-json 會(huì)根據(jù)構(gòu)建統(tǒng)計(jì)生成報(bào)告，它會(huì)幫助你分析包中包含的模塊們的大小。

vue-cli-service inspect

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

選項(xiàng)：

  --mode    指定環(huán)境模式 (默認(rèn)值：development)

你可以使用 vue-cli-service inspect 來(lái)審查一個(gè) Vue CLI 項(xiàng)目的 webpack config。更多細(xì)節(jié)請(qǐng)查閱審查 webpack config。

#查看所有的可用命令

有些 CLI 插件會(huì)向 vue-cli-service 注入額外的命令。例如 @vue/cli-plugin-eslint 會(huì)注入 vue-cli-service lint 命令。你可以運(yùn)行以下命令查看所有注入的命令：

npx vue-cli-service help

你也可以這樣學(xué)習(xí)每個(gè)命令可用的選項(xiàng)：

npx vue-cli-service help [command]

緩存和并行處理

• cache-loader 會(huì)默認(rèn)為 Vue/Babel/TypeScript 編譯開(kāi)啟。文件會(huì)緩存在 node_modules/.cache 中——如果你遇到了編譯方面的問(wèn)題，記得先刪掉緩存目錄之后再試試看。
• thread-loader 會(huì)在多核 CPU 的機(jī)器上為 Babel/TypeScript 轉(zhuǎn)譯開(kāi)啟。

Git Hook

在安裝之后，@vue/cli-service 也會(huì)安裝 yorkie，它會(huì)讓你在 package.json 的 gitHooks 字段中方便地指定 Git hook：

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
   "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

注意

yorkie fork 自 husky 且并與后者不兼容。

配置時(shí)無(wú)需 Eject

通過(guò) vue create 創(chuàng)建的項(xiàng)目無(wú)需額外的配置就已經(jīng)可以跑起來(lái)了。插件的設(shè)計(jì)也是可以相互共存的，所以絕大多數(shù)情況下，你只需要在交互式命令提示中選取需要的功能即可。

不過(guò)我們也知道滿足每一個(gè)需求是不太可能的，而且一個(gè)項(xiàng)目的需求也會(huì)不斷改變。通過(guò) Vue CLI 創(chuàng)建的項(xiàng)目讓你無(wú)需 eject 就能夠配置工具的幾乎每個(gè)角落。更多細(xì)節(jié)請(qǐng)查閱配置參考。