vue的npm run dev和npm run build的区别

`npm run dev` 和 `npm run build` 都是 Vue CLI 中的命令。

`npm run dev` 用于在开发阶段运行项目，它会启动一个开发服务器，监听文件变化并自动构建项目。

`npm run build` 用于在生产环境下构建项目。它会将项目代码编译、压缩和打包，生成可部署的静态文件。

在开发阶段，我们通常使用 `npm run dev` 来启动项目，方便修改代码和调试。而在准备部署到生产环境时，我们需要使用 `npm run build` 来生成可部署的静态文件。

相关问题

vue3 npm run dev修改端口

在 Vue3 中，可以通过在命令行中使用 `--port` 参数来修改 dev 服务器的端口。具体步骤如下：

1. 在命令行中进入你的 Vue3 项目根目录。
2. 运行以下命令来启动 dev 服务器，并将端口修改为你需要的端口：

npm run dev -- --port 8080

这里的 `8080` 是你需要修改的端口号，你可以根据需要进行修改。

3. 等待一会儿，你应该会看到类似如下的输出：

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://xxx.xxx.xxx.xxx:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

这表明你已经成功将端口修改为 `8080`。你可以访问 `http://localhost:8080` 或 `http://xxx.xxx.xxx.xxx:8080` 来访问你的应用程序。

Vue3的npm run dev

### Vue3 使用 `npm run dev` 启动开发服务器的方法

对于Vue3项目而言，启动开发服务器的方式取决于项目的构建工具链设置。通常情况下，在现代的Vue CLI创建的项目中，默认使用的命令是`npm run serve`而非`npm run dev`来启动带有热重载功能的本地开发服务器[^1]。

然而，某些自定义配置下的项目可能会使用`npm run dev`作为启动命令。这主要体现在通过特定配置后的`package.json`文件内的scripts部分指定相应的启动指令。例如：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  }
}

上述例子展示了如何在一个基于Webpack配置的Vue项目里设定`dev`脚本以供开发者调用[^3]。

当遇到执行`npm run dev`或类似的启动命令失败的情况时，常见的排查方向包括但不限于确认`package.json`内是否存在对应的script条目以及检查环境变量和依赖项是否正确安装。特别是针对新初始化的Vue3项目，应当确保已经按照官方文档指引完成了必要的全局CLI工具安装，并且局部依赖也已更新完毕[^2]。

为了使`npm run dev`能够成功触发浏览器自动打开并导航至应用首页的功能，可以在`package.json`的相关脚本前加上参数或者调整配置文件使得默认行为满足需求[^4]。