快捷導(dǎo)航

vue執(zhí)行配置選項npm?run?serve的本質(zhì)圖文詳解

更新時間：2023年05月04日 11:23:08 作者：pulledup

本地開發(fā)一般通過執(zhí)行npm run serve命令來啟動項目,那這行命令到底存在什么魔法?下面這篇文章主要給大家介紹了關(guān)于vue執(zhí)行配置選項npm?run?serve的本質(zhì)的相關(guān)資料,需要的朋友可以參考下

一、啟動開發(fā)服務(wù)器、調(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)用各個相關(guān)模塊并運行：
node.exe
# vue內(nèi)置webpack開始啟動開發(fā)服務(wù)器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
# 完成“構(gòu)建”并啟動應(yīng)用：
# 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.

總結(jié)

到此這篇關(guān)于vue執(zhí)行配置選項npm run serve的本質(zhì)的文章就介紹到這了,更多相關(guān)vue執(zhí)行配置選項npm run serve內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: