vue-cli-service build与npm run build区别

时间: 2023-09-30 14:13:22 浏览: 110

vue-cli系列之vue-cli-service整体架构浅析

在探讨Vue-CLI服务的核心组件vue-cli-service的整体架构之前，我们先了解Vue-CLI。Vue-CLI是一个基于Vue.js进行快速开发的完整系统，它提供了终端中友好的脚手架，允许开发者快速搭建项目模板。vue-cli-service是这个系统中的一个核心组件，它负责处理所有与构建配置相关的工作。 ### 关于vue-cli-service vue-cli-service提供了一些命令，比如我们常用的`npm run serve`来启动开发服务器，`npm run build`来进行生产环境的构建。这些命令是通过vue-cli-service服务来运行的，它内部使用了Webpack作为其默认的构建工具。 ### vue-cli-service的运行机制在执行`npm run serve`时，实际上是在调用vue-cli-service的`serve`命令。它首先会执行一系列检查，确保当前Node.js版本符合Vue-CLI的要求。如果不满足，则会打印出错误信息并终止启动过程。 #### Node.js版本检查在`vue-cli-service.js`文件中，可以看到对当前Node.js版本的检查代码。它使用`semver`包来检查当前Node.js版本是否符合`package.json`中声明的版本。如果不满足，将会输出错误信息并退出程序。 ```javascript const semver = require('semver'); const requiredVersion = require('../package.json').engines.node; if (!semver.satisfies(process.version, requiredVersion)) { error( `You are using Node ${process.version}, but vue-cli-service ` + `requires Node ${requiredVersion}.\nPlease upgrade your Node version.`); process.exit(1); } ``` #### vue-cli-service实例化在Node.js版本检查无误后，vue-cli-service会实例化Service类。实例化时，它会接受一个上下文参数，这个上下文通常是项目根路径，可以通过`process.cwd()`获得。 ```javascript const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd()); ``` #### 参数处理在创建Service实例后，程序会处理命令行传入的参数。这里使用了`minimist`库来解析参数，并将其转换为布尔值等。 ```javascript const rawArgv = process.argv.slice(2); const args = require('minimist')(rawArgv, { boolean: [ // build 'modern', 'report', 'report-json', 'watch', // serve 'open', 'copy', 'https', // inspect 'verbose' ] }); const command = args._[0]; ``` #### 运行Service实例一旦参数被正确处理，程序会调用Service实例的`run`方法，并将命令名称和参数传递给它。如果运行的是`serve`命令，那么`command`将会是`serve`。 ```javascript service.run(command, args, rawArgv).catch(err => { error(err); process.exit(1); }); ``` ### Service类的内部逻辑 `Service`类是vue-cli-service的核心，负责协调整个构建过程。其构造函数接受项目上下文、插件、包信息等参数。它还负责加载环境变量、初始化Webpack配置、注册插件等。 ### Webpack配置 vue-cli-service内部使用了Webpack，这意味它也需要处理Webpack配置的问题。配置被存储在`webpack-chain`的实例中，提供了链式调用的API，使得修改配置变得更为直观和容易。 ### 插件系统 vue-cli-service允许通过插件来扩展其功能。它使用`PluginAPI`类来管理插件。每个插件被赋予`PluginAPI`实例，这个实例提供了访问内部服务的接口。 ### 总结通过上述内容，我们可以看到vue-cli-service提供了一个强大而灵活的架构，使得Vue项目开发更加高效。它在内部使用Node.js和Webpack，同时提供了一个插件系统来扩展功能。开发者可以通过配置和插件来实现各种构建需求。对于理解Vue项目构建过程和配置优化，熟悉vue-cli-service是必不可少的。

引用123 #### 引用[.reference_title] - *1* [vue-cli3打包时vue-cli-service build怎么分不同环境（npm run build:stage和npm run build:prod）](https://blog.csdn.net/weixin_52428855/article/details/124631881)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [解决Vue-cli npm run build生产环境打包,本地不能打开的问题](https://download.csdn.net/download/weixin_38710566/13665391)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [go语言恶意代码检测系统-对接前端可视化与算法检测部分](https://download.csdn.net/download/liufang_imei/88222624)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

阅读全文

vue-cli-service build与npm run build区别

相关推荐

vue-cli-service深度解析：启动关键与核心代码

使用vue-cli快速构建vue项目教程

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "test:e2e": "vue-cli-service test:e2e", "lint": "vue-cli-service lint", "build:server": "./build.sh", "prettier": "prettier --write src/**/*" },解读

"scripts": { "serve": "npm run change-modules && vue-cli-service serve", "build": "npm run change-modules &&vue-cli-service build", "lint": "vue-cli-service lint", "predeploy": "yarn build", "change-modules": "node ./scripts/change-modules.js" },

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, 怎么启动这个vue项目

项目中使用的是 "build:prod": "vue-cli-service build", "build:stage": "vue-cli-service build --mode staging",

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vue-antd-pro@2.1.0 build:preview: vue-cli-service build --mode preview npm ERR! npm ERR! Failed at the vue-antd-pro@2.1.0 build:preview script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" },

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" },

> constractsystem@0.1.0 build > vue-cli-service build 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

> frontend@0.1.0 build > vue-cli-service build 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

"scripts": { "dev": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "eslint --ext .js,.vue src" }

vue-cli-service build报错

Scripts available in tool-template-vue-cli@0.1.0 via npm run-script: serve vue-cli-service serve build vue-cli-service build && node modifyFile.js lint vue-cli-service lint

C:\Users\admin\geeyoukindergarten\geeyoou-ui>npm run Scripts available in geeyoou@3.8.1 via npm run-script: dev vue-cli-service serve build:prod vue-cli-service build build:stage vue-cli-service build --mode staging preview node build/index.js --preview lint eslint --ext .js,.vue src

serve vue-cli-service serve build vue-cli-service build lint vue-cli-service lint

Vue-cli深度实践：修改Webpack多环境配置与发布策略

最新推荐

浅谈VUE-CLI脚手架热更新太慢的原因和解决方法

vue-cli3项目打包后自动化部署到服务器的方法

精选微信小程序源码：生鲜商城小程序（含源码+源码导入视频教程&文档教程，亲测可用）

Docker-compose容器编排

整合Springboot shiro jpa mysql 实现权限管理系统（附源码地址）

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包

> constractsystem@0.1.0 build > vue-cli-service build 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。

> frontend@0.1.0 build > vue-cli-service build 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。