vue-cli-service: bloody case caused by command not found error

Recently, because of work needs, I started to learn Vue, so I found a project ant-design-vue-pro with a relatively high number of stars on github to prepare for practice. After the project is cloned, use vscode to open the project, and use vscode the built-in terminal to install the dependency package, but when it is ready to execute yarn serve to start the project An error was thrown unexpectedly:

 $ vue-cli-service serve 
/bin/sh: vue-cli-service: command not found
error Command failed with exit code 127.

When I first saw this error report, I was still very calm. After all, I saw a lot of wind and waves. The first thing that came to my mind was whether the dependency package was not installed successfully?

So I deleted the node_modules directory and yarn.lock file and reinstalled the dependency package. After restarting, it still reported an error. After thinking about it, I began to wonder if I was using yarn to install the dependency package, so I replaced it with npm and pnpm to install the dependency package, and the result was still a startup error. .

Hey, I actually started to feel that this problem is not simple when I got here. I suspect that such a serious problem must not be encountered by me alone. After some Google searches, I found that some people have encountered similar problems, and proposed the following solutions. method:

1. Delete node_modules and lock files, reinstall dependencies
2. Use npm to install dependencies, don't use yarn
3. Since the error vue-cli-service command cannot be found, install npm install -g vue-cli-service globally

Method 1 and method 2 have already been tried, but it doesn't work. Although method 3 may be feasible, it is obvious that global installation vue-cli-service is not the optimal solution.

So I began to try to think for myself why the startup reported an error?

First of all, you need to figure out what operations have been performed until the final yarn serve project is started.

When we execute yarn serve in the terminal in the project directory, we will first go to the package.json scripts field in the project root directory to check whether there is an executable script. , ant-design-vue-pro is written like this:

 {
  "scripts": {
    "serve": "vue-cli-service serve"
  }
}

当yarn serve就相当于执行的是vue-cli-service serve ， nodejs会node_modules下的.bin Query in the directory vue-cli-service executable file, if it can't find it, it will go to the global installation node_modules Query the executable file, if it still can't find it, it will report an command not found .

I did not find the vue-cli-service executable file in ant-design-vue-pro 's node_modules/.bin .

Now it is clear that the reason for the error is that the vue-cli-service command does not exist, that is, @vue/cli-service This package was not installed successfully (the vue-cli-service command is created by the package @vue/cli-service introduced after installation).

So I checked the package.json file under the project and found that in the package.json devDependencies field of ---1f5fbe2e019a8df3afc6543997d24e93--- specified @vue/cli-service

 {
  "devDependencies": {
    "@vue/cli-service": "~5.0.8"
  }
}

Now the problem is simplified to:

Under what circumstances will the dependencies specified in the devDependencies field in package.json not be installed successfully?

This question is answered in thenpm documentation :

• "dependencies" : Packages required by your application in production.
• "devDependencies" : Packages that are only needed for local development and testing.

The document clarifies that the dependencies specified in devDependencies will only be installed in the local development environment or testing , and only the dependencies specified in dependencies will be installed in the production environment.

Now the problem is further reduced to:

npm, how to know if a package is installed in development environment or production environment?

Continuing to look at the npm documentation, we found an explanation in the npm install related documentation :

By default, npm install will install all modules listed as dependencies in package.json .

With the --production flag (or when the NODE_ENV environment variable is set to production ), npm will not install modules listed in devDependencies . To install all modules listed in both dependencies and devDependencies when NODE_ENV environment variable is set to production , you can use --production=false .

As explained above, when installing the dependency package, the --production parameter or the NODE_ENV environment variable is used to distinguish whether it is currently in development mode or production mode.

At this point, the problem is very clear, that is, the environment variable causes the ant-design-vue-pro project to only have the dependencies of dependencies installed, and the dependencies of devDependencies are ignored.

At this time, I suddenly recalled a detail. Every time I open the terminal from vscode (PS: My terminal uses zsh by default), the terminal will have the following prompt:

 dotenv: found '.env' file. Source it? ([Y]es/[n]o/[a]lways/n[e]ver)

I usually don't care when I encounter this prompt, and I usually choose Yes , so that if there is a .env file in our project, the zsh terminal will automatically Read environment variables and set them to the current environment.

So I quickly checked the .env environment variable under the ant-design-vue-pro project, and I saw that the value of NODE_ENV was set to production 🤷‍ ♀️.

 NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=/api

At this point, the truth is actually revealed--it's the zsh terminal I'm using.

When the terminal starts, the .env configuration file in the project root directory is automatically parsed, and the NODE_ENV environment variable is set to production in the configuration file, resulting package.josn中devDependencies The specified dependencies are not installed!

Having said that, in fact, this problem has been completely located. The solution is very simple, that is, set the environment variable to NODE_ENV=development Reinstall the dependencies and you will be able to package normally.

I tried it, and it turned out to be a success, perfect! I saw the familiar vue startup screen again, hehe, I can add a chicken leg to myself at night 😋

 yarn serve
yarn run v1.18.0
$ vue-cli-service serve
 INFO  Starting development server...

For more exciting articles, please pay attention to my public account [Front-end Architect Notes]