57 npm run build 和 npm run serve 的差异

最新推荐文章于 2024-04-25 15:34:49 发布
最新推荐文章于 2024-04-25 15:34:49 发布
阅读量1.8k 收藏 26
点赞数 29
分类专栏： 14 前端 文章标签： npm 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011039332/article/details/136586082
版权
本文从vue-cli流程分析了npm run serve和npm run build两个命令传递给webpack打包时的具体差异。包括vue-plugin加载导致的配置差异，如devtool、output、css加载loader、optimization等方面；webpack其他上下文导致的差异；还介绍了二者文件系统的不同，以及npm run serve将编译结果写出到磁盘的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

npm run serve 和 npm run build 的差异

这里主要是从 vue-cli 的流程 来看一下 我们经常用到的这两个命令, 他到传递给 webpack 打包的时候, 的一个具体的差异, 大致是配置了那些东西?

经过了那些流程 ?

 

 

vue-cli 的 vue-plugin 的加载

内置的 plugin 列表如下, 依次对应于左边的 commands, config 中的各个 js

也是在这个流程中, npm run serve 和 npm run build 产生了一些配置上的差异 导致了一部分结果的差异

2953f72fc17b4783917899015b7c70b2.png

 

 

vue-cli 的 vue-plugin 的加载导致的差异

更友好的这个json, 可以通过 vue-cli-service inspect 进行查看, 增加 --mode 参数查看不同的环境, 这里是直接调试输出的

npm run serve 执行得到的 webpack 的配置如下

{
  "mode": "development",
  "context": "D:\\WebstormWorkStations\\hello-package",
  "devtool": "eval-cheap-module-source-map",
  "output": {
    "hashFunction": "xxhash64",
    "path": "D:\\WebstormWorkStations\\hello-package\\dist",
    "filename": "js/[name].js",
    "publicPath": "",
    "chunkFilename": "js/[name].js",
    "globalObject": "(typeof self !== 'undefined' ? self : this)"
  },
  "resolve": {
    "alias": {
      "@": "D:\\WebstormWorkStations\\hello-package\\src",
      "vue$": "vue/dist/vue.runtime.esm.js"
    },
    "extensions": [
      ".mjs",
      ".js",
      ".jsx",
      ".vue",
      ".json",
      ".wasm"
    ],
    "modules": [
      "node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-service\\node_modules"
    ]
  },
  "resolveLoader": {
    "modules": [
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-plugin-babel\\node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-service\\lib\\config\\vue-loader-v15-resolve-compat",
      "node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules",
      "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\cli-service\\node_modules"
    ]
  },
  "module": {
    "noParse": {},
    "rules": [
      {
        "test": {},
        "resolve": {
          "fullySpecified": false
        }
      },
      {
        "test": {},
        "use": [
          {
            "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\@vue\\vue-loader-v15\\lib\\index.js",
            "options": {
              "compilerOptions": {
                "whitespace": "condense"
              }
            }
          }
        ]
      },
      {
        "test": {},
        "resourceQuery": {},
        "sideEffects": true
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "pug-plain-loader"
              }
            ]
          },
          {
            "use": [
              {
                "loader": "raw-loader"
              },
              {
                "loader": "pug-plain-loader"
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "type": "asset/resource",
        "generator": {
          "filename": "img/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "type": "asset",
        "generator": {
          "filename": "img/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "type": "asset",
        "generator": {
          "filename": "media/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "type": "asset",
        "generator": {
          "filename": "fonts/[name].[hash:8][ext]"
        }
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          },
          {
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "test": {},
        "oneOf": [
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2,
                  "modules": {
                    "localIdentName": "[name]_[local]_[hash:base64:5]"
                  }
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "resourceQuery": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "postcssOptions": {
                    "plugins": [
                      null
                    ]
                  }
                }
              },
              {
                "loader": "sass-loader",
                "options": {
                  "sourceMap": false
                }
              }
            ]
          },
          {
            "test": {},
            "use": [
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\vue-style-loader\\index.js",
                "options": {
                  "sourceMap": false,
                  "shadowMode": false
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\css-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "importLoaders": 2
                }
              },
              {
                "loader": "D:\\WebstormWorkStations\\hello-package\\node_modules\\postcss-loader\\dist\\cjs.js",
                "options": {
                  "sourceMap": false,
                  "
最低0.47元/天 解锁文章
vue npm run build serve时区分生产环境，测试环境,自定义命令
向宇
07-20 2971
vue npm run build serve时区分生产环境，测试环境,自定义命令——from 向宇
vue-cli 3.0脚手架配置及扩展 （六）：npm run serve 和 npm run build 拦截修改
热门推荐
Franks.T.D
06-20 2万+
修改文件为：path node_modules/@vue/cli-service/bin/vue-cli-service.js，该文件的修改基于vue-cli的版本为3.0.0-rc.2版本，这是node_modules内部文件，所以在升级vue-cli3.0时会被覆盖掉，所以建议存档，并且修改package.json中的本地开发依赖配置对象devDependencies，修改以‘@vue/’开头...
执行npm run serve/build的时候到底执行了什么？
最新发布
qq_43803987的博客
04-25 860
举一反三，npm run serve也就不难理解了，node_modules/.bin下面一定有两个vue-cli-service的文件，然后很容易就会找到vue-cli-service.js 这个文件（未完待续）众所周知，npm run 执行的是package.json里面scripts对象的key对应的value值，npm run serve实际执行的就是npm run vue-cli-service serve。我们再换个写法，毋庸置疑，肯定会报错，因为找不到自定义的my-npm-test。
55 npm run serve 和 npm run build 的分包策略
970655147的专栏
04-01 1702
然后 打包出来的情况, 可能如下, 可以看到 chunk-vendors 是进行了包的拆分, 我们这里就是 来看一下 这里 npm run build 的时候的, 一个分包的策略。编译出来 index.html 如下, 可以看到是 引入了所有的包, 不管是进入哪一个页面, 都是请求的全量的 app.js 和 chunk-vendors.js。配置 vue.config.js 的配置如下, 其中 default 下面的配置对应的是 app.js 的配置。
54 npm run serve 和 npm run build 输出的关联和差异
970655147的专栏
03-31 2909
这里大概看一下 app.js 的业务代码部分, 这里的实现和 npm run serve 拿到的 app.js 的实现具体逻辑是一样的, 只是 npm run servce 需要实现一部分特定的开发模式下的特性, 做了一些代理处理, 所以 看着更加复杂一些。App.vue 组件的定义如下, 这里主要是包含了 App 的 html模板数据, js处理逻辑, css样式数据, 然后 componentNormalizer 来组合了这几个部分, 定义了 App 的组件。
npm run serve/build 背后的真实操作
奔跑的痕迹的博客
02-28 1万+
vue CLI 用起来的确很舒服，方便省事，但他经过层层封装很难明白，执行完那个npm run serve/build 后他都干了些什么，甚至不知道整个项目是怎么跑起来的，今天自己抽时间就去瞅瞅,为加深记录特此记录记录 文章目录一、探寻npm run 背后的真实操作1、看看 npm run serve2、仿造一个serve2-1. 创建测试文件夹2-2. 在 node_modules\.b...
npm run serve或者 npm run dev到底有什么区别
weixin_38289699的博客
08-19 248
比如，npm run serve 实际运行的是 vue-cli-service serve；在运行vue文件时，需要进行npm操作，但我们发现，有时候用的是npm run serve，而有的时候用的是npm run dev，二者有什么区别。可以把这个 npm run serve 当做是 npm run package.json 里面的scripts的value。然后我们就特别好奇，npm run serve 和 npm run dev 到底有什么区别，
npm run dev/serve的区别，以及build和lint的作用
qq_44648936的博客
03-05 1万+
一、dev和serve的区别 这两个的作用都是启动项目，但是如果启动报错，就大概率是因为Vue-cli的版本不同 主要使用哪个启动项目要查看package.json中的scripts内容，如果是dev，则使用npm run dev，但如果是serve，则使用npm run serve 二、build和lint的作用 build：作用就是打包 lint：作用是修复错误的配置 ...
解决vue项目运行npm run serve报错的问题
01-18
先来一张报错的截图 先去配置环境变量 C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 ；%SystemRoot%\system32;...补充知识：vue npm run serve报错Cannot find module ‘eslint-plugin
npm run serve 和 npm run dev
weixin_49456013的博客
10-30 2296
作为一个后端开发人员，对前端知识只只皮毛，很多时候都是比葫芦画瓢，原理一点也不知。 写这篇文章的原因，还要从开始的新前端项目说起，从SVN检出项目，第一步运行一下，开始比葫芦画瓢，尴尬了，运行不了，开始查找原因。。。 ...
20181126——Vue中npm run dev和npm run build
寄蜉蝣于天地，渺沧海之一粟。
11-26 630
├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-loader.conf.js │ ├─webpack.base.conf.js │ ├─webpack.dev.conf.js │ ├─webpack.prod.c...
[Vue] npm run serve和npm run dev区别
Spideybww的博客
08-24 205
原因配置在package.json 中` 比如 "scripts": { 　　"serve": "vue-cli-service serve", 　　"build": "vue-cli-service build", 　　"lint": "vue-cli-service lint" ` 这段就使用npm run serve启动。 同理 "scripts": { 　　"dev": "vue-cli-service dev", 　　"build": "vue-cli-service build", 　　"l
npm run dev 和 npm run serve
zhangvalue的博客
11-23 1324
创建好的 vue 项目直接执行 vue run dev 报错？运行 vue run serve 就可以启动...如下 1、ERR 创建好的 vue 项目直接执行 vue run dev 报错？运行 vue run serve 就可以启动...如下 npm run dev npm ERR! missing script: dev npm ERR! A complete log of this run can be found in: npm ERR! \nodejs\node_cache\_
十二、npm包serve的使用
jcodery的博客
03-10 1892
当前端打包好包后，想在服务器上部署，看一下运行效果，但是此时，若是去特地运用node或java去搭建服务器，又过于麻烦，此时可以借助npm包serve
前端进阶-个人笔记-vue分环境开发及打包知识点（更新中）
树上骑个猴的博客
12-09 693
serve 和build 的区别 serve 是服务命令，build是用于打包用的，比如 npm run dev ,可以在浏览器上直接浏览页面，prod和uat 这两个就只能在本地打好包，然后放到服务器上，访问网址才能看到。 如何要在浏览器上看到不同的环境就用如下命令 "scripts": { "dev": "vue-cli-service serve --open", "prod":"vue-cli-service serve --mode=production", "uat":
npm run serve运行出错
cxw_fan的博客
09-22 4667
npm run serve运行出错
npm run serve 运行会出现的一些错误
qq_53280805的博客
02-27 3361
运行的时候出现npm resource busy or locked， 解决方法：在网上搜的时候会说modules那个文件出错，但是卸载之后重新安装还是不行的，如下： 也可以试试，然后又根据网上的方法安装了一些其他东西，但是还是一直报那样的错，最后，就又重新建个文件，把项目又拉一遍，然后弄住运行住，没有什么的时候当时就安上，后来就没有再报这个错了。 98% after emitting CopyPlugin 然后在运行的时候就会出现这样情况， 开始我以为是卡，然后就关一下再开，等了好长时间还是不行，最后是
解决npm run serve启动项目报错
qq_51470342的博客
05-09 1万+
解决npm run serve启动项目报错 输入pnpm run serve 报错信息： ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND  No package.json (or package.yaml, or package.json5) was found in "D:\wen jian\Project-vue-shp". 首先 cd到根目录下 cd app（根目录） 如果此时启动项目的话可能会报错： ERR_PNPM_NO_SCRIPT  Missing script: s
npm run build和npm run serve
06-28
npm run build 和 npm run serve 是使用 npm 命令来运行项目的不同方式。 npm run build 命令用于构建项目，编译代码并生成生产环境所需的相关文件，以便最终将项目部署到 Web 服务器。 npm run serve 命令则用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值