npm.cmd run dev工作使用

2025-03-27 175 阅读3分钟

代码

package.json 中的 scripts 部分

"scripts": {
  "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"
},

idea配置

运行日志

C:\Users\xxx\AppData\Roaming\JetBrains\IntelliJIdea2024.2\node\versions\16.20.2\npm.cmd run dev

launchui@5.0.0 dev vue-cli-service serve

Debugger listening on ws://127.0.0.1:49997/58b70860-3ee3-4f8f-b62f-be9b9a260a12 For help, see: nodejs.org/en/docs/ins… Debugger attached. Browserslist: caniuse-lite is outdated. Please run:

作用

在你提供的 package.json 中的 scripts 部分，每个脚本的作用如下：

1. `"dev": "vue-cli-service serve"`

作用： 这个命令启动 Vue CLI 的开发服务器，通常用于开发过程中。它会启动一个本地服务器，支持热重载，实时查看你在代码中做出的修改。
执行方式： 运行 npm run dev 或 yarn dev 时，Vue CLI 会启动开发环境，默认会在浏览器中打开项目，通常是 http://localhost:8080。

2. `"build:prod": "vue-cli-service build"`

作用： 这个命令用于构建生产环境的项目。它会对你的应用进行优化、压缩和构建，生成一个可用于部署到服务器的静态文件包（通常放在 dist 目录下）。
执行方式： 运行 npm run build:prod 或 yarn build:prod 时，Vue CLI 会生成生产环境的打包文件，通常包括压缩后的 JS、CSS 文件和优化过的图片资源。

3. `"build:stage": "vue-cli-service build --mode staging"`

作用： 这个命令用于构建一个为 staging（预生产环境） 配置的版本。通过 --mode 参数，Vue CLI 会使用不同的环境配置文件（例如 .env.staging），通常用于测试阶段，确保在正式发布之前对应用进行验证。
执行方式： 运行 npm run build:stage 或 yarn build:stage 时，会根据 staging 环境的配置来打包应用程序，通常用于开发团队内部或 QA 部门测试。

4. `"preview": "node build/index.js --preview"`

作用： 这个命令用于预览构建后的项目。通常在 build/index.js 中定义了一个用于启动静态文件服务器的脚本，以便可以在构建后查看应用程序的效果。
执行方式： 运行 npm run preview 或 yarn preview 时，Node.js 会执行 build/index.js 脚本，并启动一个预览服务器来查看构建后的静态资源，通常用于查看生产版本在本地环境下的效果。

5. `"lint": "eslint --ext .js,.vue src"`

作用： 这个命令用于运行 ESLint 来检查 src 目录下的 .js 和 .vue 文件的代码风格和潜在问题。
执行方式： 运行 npm run lint 或 yarn lint 时，ESLint 会根据你项目中配置的规则来检查代码，并在控制台输出可能存在的错误或警告。通常用于确保代码质量，避免不规范的代码进入项目。

总结：

脚本名称	命令	作用
dev	`vue-cli-service serve`	启动开发服务器，支持热重载，实时查看修改效果。
build:prod	`vue-cli-service build`	打包生成生产环境的优化文件（压缩、优化等）。
build:stage	`vue-cli-service build --mode staging`	打包生成预生产环境的版本，使用 `staging` 配置。
preview	`node build/index.js --preview`	启动一个静态文件服务器，预览生产环境打包后的效果。
lint	`eslint --ext .js,.vue src`	使用 ESLint 检查代码质量，确保符合编码规范。

这些命令在不同的开发和部署阶段都有其特定的作用，帮助你在不同环境下进行开发、构建、预览和代码检查。