CLI 服務

使用二進制

在Vue CLI項目中,@vue/cli-service 安裝一個名爲 vue-cli-service的二進制文件。我們可以直接以 npm 腳本中的 vue cli 服務或終端中的./node_modules/.bin/vue cli 服務的形式訪問二進制文件。

在使用默認預設的項目的package.json中:

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

可以使用npm或Yarn調用腳本:

npm run serve
yarn serve

如果有可用的 npx ,還可以直接使用下列命令調用二進制文件:

npx vue-cli-service serve

服務、構建和檢查

vue-cli-service服務

vue-cli-service serve 命令將啓動隨熱模塊替換(HMR)開箱即用的開發服務器(基於webpack-dev-server),除了命令行標誌之外,我們還可以使用 vue.config.js 中的 dev server 字段配置 dev 服務器。

CLI命令中的 [entry] 定義爲條目文件,而不是附加的條目文件。如果覆蓋CLI中的條目,則不再考慮 config.pages 中的條目,這可能會導致錯誤,默認爲 entryFile。

vue-cli-service 構建

在已有項目的基礎上使用,進行vue-cli-service安裝

npm i -D @vue/cli-service

package.json 中的vuePlugins對象中的 service 字段引入相應的js文件(用於註冊watch 命令的文件, 假設該文件名爲:vue-cli-plugin-watch.js,並放在根目錄)

代碼如下:

運行命令:npm run watch ,輸出判斷是否成功顯示。

然後運行npx vue-cli-service help 查看它下面所有命令,可以看到新增了一個 watch 命令。

我們還可以通過 vue-cli-service builddist/ 目錄中生產可用於生產的捆綁包,並縮小 JS/CSS/HTML,並自動拆分供應商大塊以實現更好的緩存。

vue-cli-service 檢查

使用 vue-cli-service inspect 來檢查Vue CLI項目中的webpack配置。

審查 vue-cli 項目的 webpack 配置,可以很方便將查看使用 vue-cli3 配置後,其具體的 webpack 配置:

// 重定向成一個文件
vue inspect > output.js
// 只審查第一條規則
vue inspect module.rules.0
// 指向一個規則或插件的名字
vue inspect --rule vue
vue inspect --plugin html
// 列出所有規則和插件的名字
vue inspect --rules
vue inspect --plugins

檢查所有命令,某些CLI插件會向注入其他命令 vue-cli-service。例如 @vue/cli-plugin-eslint 注入 vue-cli-service lint 命令。

npx vue-cli-service help

查看每個命令的可用選項:

npx vue-cli-service help [command]

鏈接:https://www.9xkd.com/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章