npm run build:具体

最新推荐文章于 2025-08-06 14:55:43 发布
最新推荐文章于 2025-08-06 14:55:43 发布
阅读量4.8k 收藏 4
点赞数
CC 4.0 BY-SA版权
文章标签： webpack javascript ViewUI
原文链接：https://juejin.im/post/5c21a220f265da616a47ae97
这篇博客详细解析了`npm run build`的流程，包括配置文件的作用，如`build.js`、`check-versions.js`等。文章介绍了如何通过`cross-env`设置环境变量，`webpack`的编译过程，以及各个配置文件在开发和生产环境中的职责。内容涵盖了从创建服务器到静态资源处理，再到Vue项目的Webpack配置细节。

npm run 流程图

配置文件的流程图

主要配置文件概述

"sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
"uat": "cross-env NODE_ENV=production env_config=uat node build/build.js",
"prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
复制代码

cross-env NODE_ENV=production env_config=sit cross-env 是设置环境变量的命令 NODE_ENV=production 是指生产环境 env_config是指具体的那个生产环境

build.js

loading效果 webpack编译 输出信息

最低0.47元/天 解锁文章

新学期VIP享超值加赠
npm run build部署到云服务器中的Nginx（图文配置）
码农研究僧的博客
08-26 783
对于Nginx的基本知识推荐阅读： Nginx将https重定向为http进行访问的配置（附Demo） 详细分析Nginx配置参数（附Demo） Nginx配置静态网页访问（图文界面） Nginx从入门到精通（全） 一开始访问不到，以为是Nginx的配置哪里有问题，最后发现云服务器有个必不可少的点要注意，此贴主要为了记录总结
vue npm run build 探索
学习真香
08-30 2314
vue npm run build 探索 vue-cli 是一个很好的工具. 它帮助我们集成了babel和webpack, 以及一些常用的插件. 让我们不用过多的关心配置, 专心业务. 但是, 秉承着一个对技术的好奇. 还是驱使我去看了看vue-cli的代码. 想要知道 npm run build 到底为我们做了什么 前言 文章涉及到一些常用的库, 大家可以先简单了解一下, 再看文章可能会更好理解. webpack 这里只做一些简单的介绍, 具体可以看官网 . webpack 是一个现代JavaScript
npm run build 前端生成生产环境代码的核心命令
学习代码
07-11 780
核心作用：将开发代码转化为高性能、可部署的生产环境静态资源。关键配置：在的scripts中定义命令，支持自定义脚本或框架专属指令。最佳实践：构建前确保依赖完整、测试通过；生产环境使用build:prod极致优化。部署前务必通过本地验证构建结果。
vue中npm run build打包上传云服务器
xujx1997的博客
09-23 975
首先 命令行执行npm run build命令，命令需要在项目终端下执行 npm run build 然后 我们就可以像打开静态网页一样打开我们完成的项目。 下图为打包生成的dist文件夹，其中index.html为入口文件： 打开文件夹----------->index.html 若网页空白，打开F12发现console报错，状态码为404： 引用资源的路径问题，在下图的地方修改一下再打包就可以了。 需要修改的文件在项目目录下的config文件夹里的ind...
npm run build命令详解及使用示例
Leon_Jinhai_Sun的博客
05-28 1万+
npm run build命令详解及使用示例
npm run dev & npm run build
最新发布
2302_80742310的博客
08-06 543
特性/方面npm run dev (开发模式)npm run build (生产模式)目标用户开发者最终用户核心目的提升开发效率和体验提升应用性能和加载速度服务器启动一个带热更新的本地开发服务器不启动服务器，只生成文件输出结果通常在内存中，不生成永久文件在 dist 或 build 文件夹中生成静态文件构建速度快，牺牲优化换取速度慢，进行大量优化操作代码体积大，包含调试信息小，经过压缩和优化调试容易，有 Source Maps困难，代码被混淆和压缩使用场景日常编码、调试、测试新功能时。
关于vue的npm run dev和npm run build的区别介绍
10-17
在Vue项目中，我们经常会遇到两种常用的npm脚本命令：`npm run dev`和`npm run build`。这两个命令分别用于启动开发服务器和构建生产环境的应用程序。下面详细介绍一下这两个命令的区别。 1. npm run dev `npm run ...
前后端分离的开发框架中，以下几种命令：npm run dev、npm run build:stage 和 npm run build:prod分别有什么作用和区别（详解）
Future_yzx的博客
02-05 3627
在前后端分离的开发框架中（例如 Vue、React 等），前端的构建和启动过程通常包括以下几种命令：npm run dev和 npm run build:prod。命令环境类型主要功能典型用途开发环境启动开发服务器，支持热更新，调试信息丰富，快速开发前端开发时本地启动应用，调试和修改功能测试环境构建并优化适合测试环境的代码，轻度优化，准备部署到测试环境部署到测试或预发布环境，进行集成和验收测试生产环境进行生产环境级别的压缩和优化，生成适合上线的代码。
vue中Npm run build 根据环境传递参数方法来打包不同域名
12-12
使用 npm run build -- xxx ，根据传递参数xxx来判定不同的环境，给出不同的域名配置。 1.项目中/config/dev.env.js修改： 新增：HOST: ‘”dev”‘ 'use strict' const merge = require('webpack-merge') const ...
npm run build
洪布斯的博客
12-27 2253
使用npm run build命令进行打包，直接打开index.html是无法看到内容的 1.全局安装express-generator生成器。 express-generator是express新版本分离出来的命令工具，想要使用express命令必须装这个依赖。 npm install express-generator -g //也可使用cnpm比较快 2.创建一个expres...
【npm指令】npm run build
软件测试入门&进阶
04-10 607
【代码】【npm指令】npm run build。
npm run build 打包命令
热门推荐
m0_56174822的博客
05-25 7万+
vue使用npm run build命令打包项目 当我们使用vue-cli脚手架完成一个项目的时候，下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢，我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来，但是现在我们要把他放到服务器上的话用npm run build命令就可以啦。 首先 命令行执行npm run build命令，命令需要在项目目录下执行 C:\Users\John\Desktop\demo>npm run build 我的是一个在...
npm run build 打包
m0_63476377的博客
12-13 3026
npm run build ==> 执行以后会有dist文件 vue使用npm run build命令打包 - 西瓜君~ - 博客园 npm run build 打包爬坑记（1）_陌上花开-优快云博客_npm 打包
详细分析 npm run build 基本知识 | 不同环境不同命令
码农研究僧的博客
11-26 4434
npm run 是 npm 的一个命令，用于运行 package.json 中定义的脚本，可以通过 “scripts” 字段为项目定义各种任务
npm run build --report
weixin_35751194的博客
01-08 691
这个命令会让 npm 运行你在 package.json 文件中的 "build" script，并且会生成一份构建报告。这份报告可以帮助你更好地理解构建过程中发生了什么，如果有任何问题，这份报告也可以帮助你进行调试。 ...
vue打包（npm run build）
岁末zzz的博客
02-11 8252
一、vue项目的创建 1、首先第一肯定是要有Node.js及npm这个不多说了 2、安装脚手架 二、vue项目的打包 1、大家都知道使用npm run build进行打包，这个时候你直接打开dist/下的index.html,会发现文件可以打开，但是所有的js，css，img等路径有问题是指向根目录的， 此时需要修改config/index.js里的assetsPublicPath的字段，初始项...
「随手一记」「Vue.js篇」「npm run dev（build）配置开发、测试、生产环境」
一一丁点的博客
06-11 7885
在开发及线上（打包）过程中，经常会遇到根据不同的环境（开发、测试、生产）进行项目的发布。因此本文章主要介绍使用 npm run dev 和 npm run build 进行配置开发、测试、生产环境的切换，这只是切换方式之一（当然还有其他的方式，这里不做介绍）。 本文章介绍的方法有点繁琐，仅供参数，若有哪里写错或不足的地方，请指教。 项目介绍 开发工具：Visual Studio Code 构建脚支架：webpack 项目名称：VUE-DEMO 涉及目录及文件 主要涉及目录及默认文件：b..
npm run build:rm
08-26
npm run build:rm是一个自定义的命令，不是uniapp内置的命令。根据提供的引用内容，npm run build:rm是在进行项目构建时使用的命令，具体的执行逻辑需要查看项目中的package.json文件中的scripts字段来确定。在提供的引用内容中并没有提到npm run build:rm的具体执行内容。需要进一步查看项目的package.json文件来了解npm run build:rm的具体作用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [uniapp 运行npm run dev:h5命令启动报错问题](https://blog.youkuaiyun.com/smileKH/article/details/129285566)[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: 50%"] - *3* [关于vue打包时 npm run build 命令 报错的解决方法](https://blog.youkuaiyun.com/m0_65450343/article/details/125221789)[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: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值