分析npm run serve之后发生了什么?

首先需要明白的是,当你在终端去运行 npm run ****,会是什么过程。
分析npm run serve之后发生了什么?_第1张图片
根据上图的一个流程,就可以衍生出很多问题。

1,为什么不直接运行vue-cli-service serve?

因为直接运行 vue-cli-service serve,会报错, 因为操作系统中不存在 vue-cli-service serve

2, 为什么可以执行npm run serve

因为我们在安装以来的时候 ,是通过 npm i *** 来执行的。

npm在安装依赖的时候,就会在node_modules/.bin/目录中创建好***的几个可执行文件了。

在.bin目录下面的文件表示软链接,文件内容顶部 会写着 #!/bin/sh 。 表示这是一个脚本

因此在我们npm run serve 的时候,npm 会到./node_modules/.bin中找到vue-cli-service文件,作为脚本来执行, 相当于执行了./node_modules/.bin/vue-cli-service serve

则serve是作为参数传入进来 执行脚本

3,package.json 文件 如何出现以及如何定位的

当我们使用npm来管理项目的时候,会在根目录下生成一个package.json文件, 其中的scripts属性,就是用来配置npm run ***

"scripts": {
    "start": "node ./src/index.js",
    "build": "react-scripts build",
    "serve": "vue-cli-service serve"
  },

比如上面的代码 ,当我npm run start,相当于 node ./src/index.js

node环境下 ,可以把js文件当做脚本执行。

4,除了serve作为参数, 还有其他格式要求吗?

官网指定位置跳转链接

对于vue命令后面的参数格式,在官网是有说明。

用法:vue-cli-service serve [options] [entry]

选项:

  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值:development)
  --host    指定 host (默认值:0.0.0.0)
  --port    指定 port (默认值:8080)
  --https   使用 https (默认值:false)

比如我们常用的 vue-cli-service serve --mode dev, 就是使用了上面的–mode, 来指定环境模式,进而去加载对应的env文件。不懂env文件,可以去看这个博客浅析env文件

你可能感兴趣的:(Vue,npm,前端,node.js)