npm run serve 和 npm run build 区别

npm run servenpm run build 都是 Vue 项目中的常用命令,但它们的功能和使用场景是不同的。以下是它们的主要区别:

1. npm run serve

  • 开发模式: 这个命令用于启动开发服务器,通常用于开发过程中。

  • 功能:

    • 启动一个本地开发服务器,监听文件变动,并自动刷新浏览器。
    • 在浏览器中访问应用程序时,加载的是最新的开发版本。
    • 没有进行打包和优化,代码未压缩。
    • 支持热模块替换(HMR),在代码更新时只刷新修改部分,提升开发效率。
    • 代码是通过内存中的开发服务器运行的,而不是通过静态文件。
  • 使用场景:

    • 在开发过程中进行实时调试和查看效果。
  • 执行过程:

    arduino 复制代码
    npm run serve

    运行后,你可以在浏览器中通过 http://localhost:8080(默认端口)查看应用。


2. npm run build

  • 生产模式: 这个命令用于构建生产环境的静态文件,用于部署到线上服务器。

  • 功能:

    • 执行编译和优化,生成经过压缩、优化和处理后的生产版本。
    • 生成的静态文件会放到 dist/ 目录下,包含 HTML、CSS、JS、图片等资源。
    • 进行资源优化(如图片压缩、代码分割、JS 和 CSS 压缩)以提升性能。
    • 在生产环境下,publicPathoutputDir 等配置会影响打包结果。
  • 使用场景:

    • 打包应用以便部署到服务器或进行其他生产环境操作。
  • 执行过程:

    arduino 复制代码
    npm run build

    执行后,生成的静态文件会保存在 dist 目录中,你可以将这个目录上传到生产服务器上进行部署。


总结对比:

命令 用途 生成的文件 是否压缩优化 适用场景
npm run serve 启动开发服务器,在开发过程中查看实时效果 没有生成静态文件,使用内存中的文件 不压缩、不优化 开发、调试
npm run build 构建生产版本,将项目打包为可部署的静态文件 生成 dist/ 目录,包含优化后的文件 压缩、优化、代码分割 生产部署

小结:

  • npm run serve:适用于开发时,提供实时调试和热重载功能。
  • npm run build:适用于打包生产环境文件,生成最终部署的文件。
相关推荐
毕业设计70311 小时前
(免费领源码) 基于微信小程序的预制菜商城的设计与实现25172-java、PHP、python、C#、小程序、大数据、单片机、网络工程等)
vue.js·python·mysql·微信小程序·pycharm·微信开发者工具·推荐算法
xifangge202511 小时前
AGENTS.md 怎么写?涵盖 Java、Python、Vue、Go 的 8 套开箱即用模板
java·vue.js·python
雪芽蓝域zzs12 小时前
vue解构平铺VS对象包裹
前端·javascript·vue.js
Bs_MoneyMagnet16 小时前
基于springboot+vue的旅游景区点评系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring·旅游
ID346107442017 小时前
【课程设计】基于Spring Boot+Vue的校园共享无人机服务系统设计与实现-计算机毕设 附源码44219
javascript·vue.js·spring boot·python·node.js·php·课程设计
BillKu17 小时前
Vue3 可拖拽分栏布局:两种实现方式详解
javascript·vue.js·ecmascript
雪芽蓝域zzs18 小时前
第三十七节:防抖、节流封装(composables 通用函数,搜索框防重复请求)
前端·javascript·vue.js
Bs_MoneyMagnet1 天前
基于springboot+vue的爱心众筹系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring·管理系统
Bs_MoneyMagnet1 天前
基于springboot+vue的在线音乐管理系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring
岁岁种桃花儿1 天前
Vue组件化编程第二篇:非单位件组件
前端·javascript·vue.js