vue执行配置选项npm run serve的本质图文详解
更新时间：2023年05月04日 11:23:08 作者：pulledup
本地开发一般通过执行npm run serve命令来启动项目,那这行命令到底存在什么魔法?下面这篇文章主要给大家介绍了关于vue执行配置选项npm run serve的本质的相关资料,需要的朋友可以参考下
一、启动开发服务器、调用“工具链”、编译、并运行当前工程
npm run serve
该命令的配置文件在当前工程的package.json文件中，随@vue/cli脚手架驱动产生的vue的工程默认自动生成：
（图1）
（图2）
二、npm run serve内部原理分析
打开“工程”下的node包依赖路径下的“可执行脚本”目录：node_modules\bin
（图3）
如 图3 所示，vue-cli-service.cmd文件，即 图1 所运行的实际脚本，运行其命令行帮助：
（图4）
得知其需要1些选项来执行命令（ 如 图4 所示）：
（图5）
分别打开 图5 所示的两个文件，得知vue-cli-service.cmd需要带1个“选项参数”来执行内部命令（ 如 图6、图7 所示）：
（图6）
（图7）
通过分析 vue-cli-service.js 源码：
（图8）
得知，“选项参数” 的别名，分别为 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)
})因而，开发环境，npm run serve 的原生CLI命令行脚本为：
node .\node_modules\@vue\cli-service\bin\vue-cli-service.js serve
同理，生产环境，进行分发时，npm run build 的原生CLI命令行脚本为：
node .\node_modules\@vue\cli-service\bin\vue-cli-service.js build
三、vue编译运行过程
npm run serve、npm run build等“调试运行脚本”：仅仅是Vue默认在内部做了1个“命令行”封装而已！以包配置文件（package.json）的形式与用户交互。
# 过程大致如此： # INFO Starting development server... # node调用各个相关模块并运行： node.exe # vue内置webpack开始启动开发服务器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内置webpack调用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开始调用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执行配置选项npm run serve的本质的文章就介绍到这了,更多相关vue执行配置选项npm run serve内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了VUE数组根据索引删除数据,页面同时更新的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue中使用router全局守卫实现页面拦截的示例，帮助大家维护自己的项目，感兴趣的朋友可以了解下2020-10-10
如何利用vscode-icons-js在Vue3项目中实现文件图标展示
在开发文件管理系统或类似的项目时,我们常常需要根据文件类型展示对应的文件图标,这样可以提高用户体验,本文将介绍如何在Vue3项目中利用vscode-icons-js库,实现类似VSCode的文件图标展示效果,感兴趣的朋友一起看看吧2024-08-08
今天给大家介绍一款基于vue2的canvas时钟倒计时组件，这个时钟倒计时组件采用canvas动画的炫酷动画效果形式，根据剩余时间的多少变换颜色和旋转扇形的速度，适合抢购、拍卖、下注等业务场景，且对移动端友好,需要的朋友可以参考下2018-11-11
Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。接下来通过本文给大家介绍vue的基本用法与常见指令，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要介绍了Vue在数据发生变化后是如何更新页面的，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
vue启动后请求后端接口报ERR_EMPTY_RESPONSE错误的解决
这篇文章主要介绍了vue启动后请求后端接口报ERR_EMPTY_RESPONSE错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vue3新特性之在Composition API中使用CSS Modules
这篇文章主要介绍了Vue3新特性之在Composition API中使用CSS Modules,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
vue组件在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。2022-12-12
element-plus中el-table点击单行修改背景色方法
这篇文章主要给大家介绍了关于element-plus中el-table点击单行修改背景色的相关资料,这是产品新加了的一个需求,分享给同样遇到这个需求的朋友,需要的朋友可以参考下2023-07-07
最新评论