Friends often ask me why when we develop a vue project, we need to set the command to start the project in the script object of package.json instead of directly using the "vue-cli-service serve" command to start the project. start running.
With these questions, Xiaosheng summarizes the following questions here, hoping to be useful to readers, and also hopes to bring some inspiration to readers.
1. For the vue-cli project, why can’t I run the vue-cli-service command directly?
Second, for the vue-cli project, why can’t the vue-cli-service serve command be run directly? Instead, it must be run through npm run?
Third, why is there a path problem when running vue-cli-service serve directly, but there is no path problem when using npm run?
4. The reason why the vue-cli-service serve prompt when entering the command vue-cli-service in the vue-cli project is not an internal command and how to solve it?
1. For the vue-cli project, why can’t I run the vue-cli-service command directly?
In a newly created vue-cli project, if you run the vue-cli-service command directly, it will not run properly because vue-cli-service is a tool and needs specific instructions to run. For example, if you want to start the project, you need to run the vue-cli-service serve command; if you want to package the project, you need to run the vue-cli-service build command. Therefore, we need to add specific instructions after the vue-cli-service command to run normally.
Second, for the vue-cli project, why can’t the vue-cli-service serve command be run directly? Instead, it must be run through npm run?
In a new vue-cli project, we can use the vue-cli-service serve command to start the project, but we usually do not run this command directly. Instead, we configure an npm script in the package.json file to run vue- cli-service serve . This is because if we run vue-cli-service serve directly , some problems may occur, such as:
On different operating systems, the path of the command may be different, which may result in the command not being recognized.
In different development environments, different parameters may be required, such as specifying port numbers, etc.
We usually need to do some preparation work before starting the project, such as compiling the code, starting the mock service, etc. These tasks can be achieved through npm script . Therefore, we usually configure an npm script in the package.json file to start the project, for example:
{
"scripts":{
"serve":"vue-cli-service serve"
}
}Then, run npm run serve in the command line to start the project. The advantage of this is that you can easily manage the project's dependencies, configuration and running environment, and you can conduct compatibility testing in different development environments.
Third, why is there a path problem when running vue-cli-service serve directly, but there is no path problem when using npm run?
Directly running the vue-cli-service serve command may cause path problems because the path in the command line is not necessarily the same as the path where the vue-cli-service command is located. For example, if we execute vue-cli-service serve in the command line , and the path at this time is not the root directory of the vue-cli project, path problems will occur. In the root directory of the project, we can use relative paths to reference the vue-cli-service command to avoid path problems. Using the npm run command to start vue-cli-service serve will not cause path problems because npm run will execute the command in the root directory of the project, so that you can use relative paths to reference the vue-cli-service command to avoid Path problem. At the same time, in the npm run command, we can also specify the path of command execution through the --prefix parameter, thus avoiding path problems. Therefore, it is safer to use the npm run command to start vue-cli-service serve .
4. The reason why the vue-cli-service serve prompt when entering the command vue-cli-service in the vue-cli project is not an internal command and how to solve it?
If you enter the command vue-cli-service serve in the vue-cli project and it is prompted that it is not an internal command, there may be the following reasons:
vue-cli-service is not installed: If @vue/cli is not installed globally or the @vue/cli-service dependency is installed in the project , the vue-cli-service command will not be recognized. The problem can be solved by installing it globally or installing the @vue/cli-service dependency in the project .
Environment variables are not configured: If vue-cli-service has been installed, but the prompt when entering the command is not an internal command, it may be because the environment variables are not configured. You can start the project by adding the node_modules/.bin directory to the environment variable, or using the npx vue-cli-service serve command (note: this must be started in the root directory of the project) .
The project directory is not open in the command line window: If the vue-cli project directory is not opened in the command line window, then when you enter the vue-cli-service serve command, you will be prompted that it is not an internal command. You can solve the problem by entering the project directory in the command line window and then entering the vue-cli-service serve command.