vue執(zhí)行配置選項(xiàng)npm run serve運(yùn)行開發(fā)服務(wù)器的本質(zhì)

目錄

vue執(zhí)行配置選項(xiàng)npm run serve運(yùn)行開發(fā)服務(wù)器的本質(zhì)

一、啟動(dòng)開發(fā)服務(wù)器、調(diào)用“工具鏈”、編譯、并運(yùn)行當(dāng)前工程

二、npm?run serve內(nèi)部原理分析

三、vue編譯運(yùn)行過程

喜歡的，就收藏并點(diǎn)個(gè)贊，便于觀看下篇文章：

一、啟動(dòng)開發(fā)服務(wù)器、調(diào)用“工具鏈”、編譯、并運(yùn)行當(dāng)前工程

npm run serve

? ? ? ? 該命令的配置文件在當(dāng)前工程的package.json文件中，隨@vue/cli腳手架驅(qū)動(dòng)產(chǎn)生的vue的工程默認(rèn)自動(dòng)生成：?

?（圖1）

??（圖2）

二、npm?run serve內(nèi)部原理分析

? ? ? ? ?打開“工程”下的node包依賴路徑下的“可執(zhí)行腳本”目錄：node_modules\bin

???（圖3）

? ? ? ? ?如 圖3 所示，vue-cli-service.cmd文件，即 圖1 所運(yùn)行的實(shí)際腳本，運(yùn)行其命令行幫助：

???（圖4）

? ? ? ? ?得知其需要1些選項(xiàng)來執(zhí)行命令（?如 圖4 所示）：

???（圖5）

? ? ? ? 分別打開?圖5?所示的兩個(gè)文件，得知vue-cli-service.cmd需要帶1個(gè)“選項(xiàng)參數(shù)”來執(zhí)行內(nèi)部命令（?如 圖6、圖7 所示）：

???（圖6）

???（圖7）

? ? ? ? 通過分析?vue-cli-service.js?源碼：

?（圖8）

?? ? ? ? 得知，“選項(xiàng)參數(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)境，進(jìn)行分發(fā)時(shí)，npm run build?的原生CLI命令行腳本為：

node .\node_modules\@vue\cli-service\bin\vue-cli-service.js build

三、vue編譯運(yùn)行過程

? ? ? ? npm run serve、npm run build等“調(diào)試運(yùn)行腳本”：僅僅是Vue默認(rèn)在內(nèi)部做了1個(gè)“命令行”封裝而已！以包配置文件（package.json）的形式與用戶交互。

# 過程大致如此：
#         INFO  Starting development server... 
# node調(diào)用各個(gè)相關(guān)模塊并運(yùn)行：
node.exe
# vue內(nèi)置webpack開始啟動(dòng)開發(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解析代碼進(jìn)行語法分析、依賴分析：
 .\node_modules\cache-loader\dist\cjs.js??ref--13-0!
 .\node_modules\babel-loader\lib\index.js!
# ...........
# vue-loader加載器啟動(dòng)選項(xiàng)：
 .\node_modules\vue-loader\lib\index.js??vue-loader-options!
# 對(duì)你的工程中的文件進(jìn)行語法及依賴分析：
 .\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)建”并啟動(dòng)應(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.

喜歡的，就收藏并點(diǎn)個(gè)贊，便于觀看下篇文章：

原生CLI指令構(gòu)建npm run減少硬盤node_modules的開銷_pulledup的博客-CSDN博客

vscode用戶配置文件等的存取_pulledup的博客-CSDN博客_vscode配置文件在哪
?

關(guān)于vscode插件查詢、備份與恢復(fù)_pulledup的博客-CSDN博客_vscode緩存文件內(nèi)容恢復(fù)

推薦一款最流行的流程圖及圖表工具draw.io，老掉牙的工具已無人再用_pulledup的博客-CSDN博客_drawio 圖庫

http通訊及瀏覽器中的HTML編碼、URL編碼、base64編碼及轉(zhuǎn)義_pulledup的博客-CSDN博客

開發(fā)者實(shí)名認(rèn)證的一般通行做法_pulledup的博客-CSDN博客文章來源地址http://www.zghlxwxcb.cn/news/detail-812741.html

到了這里，關(guān)于vue執(zhí)行配置選項(xiàng)npm run serve的本質(zhì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！