使用二進制
在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 build
在 dist/
目錄中生產可用於生產的捆綁包,並縮小 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]