vue執(zhí)行配置選項npm?run?serve的本質(zhì)圖文詳解
更新時間：2023年05月04日 11:23:08 作者：pulledup
本地開發(fā)一般通過執(zhí)行npm run serve命令來啟動項目,那這行命令到底存在什么魔法?下面這篇文章主要給大家介紹了關于vue執(zhí)行配置選項npm?run?serve的本質(zhì)的相關資料,需要的朋友可以參考下
一、啟動開發(fā)服務器、調(diào)用“工具鏈”、編譯、并運行當前工程
npm run serve
該命令的配置文件在當前工程的package.json文件中，隨@vue/cli腳手架驅(qū)動產(chǎn)生的vue的工程默認自動生成：
（圖1）
（圖2）
二、npm run serve內(nèi)部原理分析
打開“工程”下的node包依賴路徑下的“可執(zhí)行腳本”目錄：node_modules\bin
（圖3）
如 圖3 所示，vue-cli-service.cmd文件，即 圖1 所運行的實際腳本，運行其命令行幫助：
（圖4）
得知其需要1些選項來執(zhí)行命令（ 如 圖4 所示）：
（圖5）
分別打開 圖5 所示的兩個文件，得知vue-cli-service.cmd需要帶1個“選項參數(shù)”來執(zhí)行內(nèi)部命令（ 如 圖6、圖7 所示）：
（圖6）
（圖7）
通過分析 vue-cli-service.js 源碼：
（圖8）
得知，“選項參數(shù)” 的別名，分別為 build、 serve 、inspect ：
#!/usr/bin/env node
const { semver, error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node
if (!semver.satisfies(process.version, requiredVersion, { includePrerelease: true })) {
error(
`You are using Node ${process.version}, but vue-cli-service ` +
`requires Node ${requiredVersion}.\nPlease upgrade your Node version.`
)
process.exit(1)
}
const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv, {
boolean: [
// build
'modern',
'report',
'report-json',
'inline-vue',
'watch',
// serve
'open',
'copy',
'https',
// inspect
'verbose'
]
})
const command = args._[0]
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})因而，開發(fā)環(huán)境，npm run serve 的原生CLI命令行腳本為：
node .\node_modules\@vue\cli-service\bin\vue-cli-service.js serve
同理，生產(chǎn)環(huán)境，進行分發(fā)時，npm run build 的原生CLI命令行腳本為：
node .\node_modules\@vue\cli-service\bin\vue-cli-service.js build
三、vue編譯運行過程
npm run serve、npm run build等“調(diào)試運行腳本”：僅僅是Vue默認在內(nèi)部做了1個“命令行”封裝而已！以包配置文件（package.json）的形式與用戶交互。
# 過程大致如此： # INFO Starting development server... # node調(diào)用各個相關模塊并運行： node.exe # vue內(nèi)置webpack開始啟動開發(fā)服務器webpack-dev-server ： .\node_modules\webpack-dev-server\client\index.js?http://192.168.3.242:8081&sockPath=/sockjs-node .\node_modules\webpack\hot\dev-server.js .\node_modules\webpack-dev-server\client\index.js?http://192.168.3.242:8081&sockPath=/ # vue內(nèi)置webpack調(diào)用cache-loader和babel-loader解析代碼進行語法分析、依賴分析： .\node_modules\cache-loader\dist\cjs.js??ref--13-0! .\node_modules\babel-loader\lib\index.js! # ........... # vue-loader加載器啟動選項： .\node_modules\vue-loader\lib\index.js??vue-loader-options! # 對你的工程中的文件進行語法及依賴分析： .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\App.vue?vue&type=te .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\A .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=tem .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avat .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\A .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avat .\node_modules\babel-loader\lib\index.js .\node_modules\cache-loader\dist\cjs.js??ref--13-0! # ........... # vue-loader開始調(diào)用index.js處理你的工程中的文件： .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\App.vue?vue&type=te .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=tem .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=tem .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\App.vue?vue&type=style&index=0&id= .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\App.vue?vue&type=style&index=0&id= .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\App.vue?vue&type=style&index=0&id= .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d .\node_modules\vue-loader\lib\index.js??vue-loader-options!.\src\components\Avatar.vue?vue&type=style&index=0&id=5811d # 完成“構建”并啟動應用： # 98% after emitting CopyPlugin # DONE Compiled successfully in 5177ms 上午4:56:59 # App running at: # - Local: http://localhost:8081/ # - Network: http://192.168.3.242:8081/ # # Note that the development build is not optimized. # To create a production build, run npm run build.
總結
到此這篇關于vue執(zhí)行配置選項npm run serve的本質(zhì)的文章就介紹到這了,更多相關vue執(zhí)行配置選項npm run serve內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue項目中數(shù)據(jù)的深度監(jiān)聽或?qū)ο髮傩缘谋O(jiān)聽實例
這篇文章主要介紹了Vue項目中數(shù)據(jù)的深度監(jiān)聽或?qū)ο髮傩缘谋O(jiān)聽實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關于Vue自定義v-has指令實現(xiàn)按鈕權限判斷的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
這篇文章主要介紹了vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue3中的setup是一個新的生命周期函數(shù),它可以用來代替組件中的 data和一些生命周期函數(shù)（如created和beforeMount）,這篇文章主要介紹了vue3如何使用setup代替created的相關資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vant之關于van-list的使用以及一些坑的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了VUE項目實現(xiàn)主題切換的方法，本文通過多種方法給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了Vue3使用router,params傳參為空問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果
這篇文章主要介紹了用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue?elementUI之this.$confirm的使用方式
這篇文章主要介紹了vue?elementUI之this.$confirm的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
這篇文章主要介紹了使用vue2實現(xiàn)購物車和地址選配功能,本文通過實例代碼相結合的形式給大家介紹的非常詳細，需要的朋友可以參考下2018-03-03