您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue CLI3中啟動cli服務(wù)參數(shù)有哪些”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“Vue CLI3中啟動cli服務(wù)參數(shù)有哪些”文章能幫助大家解決問題。
在一個 Vue CLI 項目中,@vue/cli-service 安裝了一個名為 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問這個命令。
這是你使用默認 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 [options] [entry]
選項:
--open
:在服務(wù)器啟動時打開瀏覽器
--copy
:在服務(wù)器啟動時將 URL 復(fù)制到剪切版
--mode
:指定環(huán)境模式 (默認值:development)
--host
:指定 host (默認值:0.0.0.0)
--port
:指定 port (默認值:8080)
--https
:使用 https (默認值: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 [options] [entry|pattern]
選項:
--mode
:指定環(huán)境模式 (默認值:production)
--dest
:指定輸出目錄 (默認值:dist)
--modern
:面向現(xiàn)代瀏覽器帶自動回退地構(gòu)建應(yīng)用
--target
:app | lib | wc | wc-async (默認值:app)
--name
:庫或 Web Components 模式下的名字 (默認值:package.json 中的 "name" 字段或入口文件名)
--no-clean
:在構(gòu)建項目之前不清除目標目錄
--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 組件的方式進行構(gòu)建。更多細節(jié)請查閱構(gòu)建目標。
--report
和--report-json
會根據(jù)構(gòu)建統(tǒng)計生成報告,它會幫助你分析包中包含的模塊們的大小。
用法:vue-cli-service inspect [options] [...paths]
選項:
--mode
:指定環(huán)境模式 (默認值:development)
你可以使用 vue-cli-service inspect來審查一個 Vue CLI 項目的 webpack config。
有些 CLI 插件會向 vue-cli-service 注入額外的命令。例如 @vue/cli-plugin-eslint 會注入 vue-cli-service lint 命令。你可以運行以下命令查看所有注入的命令:
npx vue-cli-service help
你也可以這樣學(xué)習(xí)每個命令可用的選項:
npx vue-cli-service help [command]
安裝vue-cli:npm install -g @vue/cli
新建項目:vue init webpack projectName
運行項目:npm run dev
編譯項目: npm run build
引入框架(echarts 框架名稱):cnpm install echarts -S
關(guān)于“Vue CLI3中啟動cli服務(wù)參數(shù)有哪些”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。