vue执行配置选项npm run serve运行开发服务器的本质

一、启动开发服务器、调用“工具链”、编译、并运行当前工程

二、npm run serve内部原理分析

三、vue编译运行过程

喜欢的，就收藏并点个赞，便于观看下篇文章：

一、启动开发服务器、调用“工具链”、编译、并运行当前工程

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 nodeconst { semver, error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.nodeif (!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.

喜欢的，就收藏并点个赞，便于观看下篇文章：

原生CLI指令构建npm run减少硬盘node_modules的开销_pulledup的博客-CSDN博客

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

关于vscode插件查询、备份与恢复_pulledup的博客-CSDN博客_vscode缓存文件内容恢复

推荐一款最流行的流程图及图表工具draw.io，老掉牙的工具已无人再用_pulledup的博客-CSDN博客_drawio 图库

http通讯及浏览器中的HTML编码、URL编码、base64编码及转义_pulledup的博客-CSDN博客

开发者实名认证的一般通行做法_pulledup的博客-CSDN博客

vue执行配置选项npm run serve的本质相关推荐

下找到vue变量_Vue：npm run serve 到底做了什么？
前言在 vue-cli2或者 vue-cli3 中,当我们创建好一个项目,我们要通过 npm run dev(vue-cli2的命令,vue-cli3之后用npm run serve,原理都一样,只 ...
vue项目执行命令npm run serve运行项目时停在 98% after emitting CopyPlugin
问题描述启动vue项目执行命令:npm run serve.控制台一直停留在'98% after emitting CopyPlugin' 问题解决对问题进行排查后发现是项目中使用require( ...
【Vue】npm run serve 和 npm run dev 有什么区别
[Vue]npm run serve 和 npm run dev 有什么区别 Q: 我的粉丝私信我,项目中运行的npm run serve 和 npm run dev 有什么区别?什么时候用npm r ...
npm run dev 和 npm run serve区别
在运行vue文件时,需要进行npm操作,但我们发现,有时候用的是npm run serve,而有的时候用的是npm run dev,二者有什么区别在我们运行一些 vue 项目的时候,输入npm ru ...
JS stacktrace--解决运行npm run serve 后报错，node内存溢出问题
电脑系统:MAC M1 拉取vue项目,运行npm run serve 后,报错如下 <--- JS stacktrace --->==== JS stack trace ======== ...
npm run serve 报错
npm run serve 报错如下: 第一种情况: 那么遇到这种情况不用慌,因为你所在的目录不对,你没有在你所运行的vue项目中运行npm run serve,那么就需要切换到该文件夹目录下 ,然后 ...
vue让你理解npm run dev 和 npm run serve
npm run dev 是vue-cli2.0版本使用的 npm run serve 是vue-cli3.0版本使用的 dev build serve? 在我们运行一些 vue 项目的时候, ...
vue项目启动时，是npm run serve，还是 npm run dev ？
在我们刚接手一个新的vue项目的时候,要启动项目会输入npm run serve或者npm run dev其中一个时,会提示报错这时,我们就会很好奇,为什么有的项目使用 npm run dev启动, ...
vue 启动项目报错 npm run serve
安装了一个vue-element admin,习惯性输入,然后报错. npm run serve npm ERR! missing script: servenpm ERR! A complete l ...

vue执行配置选项npm run serve的本质

vue执行配置选项npm run serve运行开发服务器的本质

一、启动开发服务器、调用“工具链”、编译、并运行当前工程

二、npm run serve内部原理分析

三、vue编译运行过程

喜欢的，就收藏并点个赞，便于观看下篇文章：

vue执行配置选项npm run serve的本质相关推荐

最新文章

热门文章