關(guān)于Vue?CLI3中啟動cli服務(wù)參數(shù)說明

更新時間：2022年04月02日 11:38:39 作者：Shawyu_

這篇文章主要介紹了關(guān)于Vue?CLI3中啟動cli服務(wù)參數(shù)說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue CLI3啟動cli服務(wù)參數(shù)

使用命令

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

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

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

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

npm run serve
# OR
yarn serve

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

npx vue-cli-service serve

vue-cli-service serve

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

選項：

--open：在服務(wù)器啟動時打開瀏覽器
--copy：在服務(wù)器啟動時將 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 命令會啟動一個開發(fā)服務(wù)器 (基于 webpack-dev-server) 并附帶開箱即用的模塊熱重載 (Hot-Module-Replacement)。

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

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

vue-cli-service build

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

選項：

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

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

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

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