Chapter 1 Preface
I believe that many friends who are new to Vue will have such a situation, that is, they get a project. No matter how they are done, the command to run the project is always npm run serve . Of course, there is definitely no problem if we run it this way and for most projects Generally speaking, it can be run through, but you may not know the reason why it runs like this. Next, I will give a command npm run dev . When using this command, sometimes the code can be run using npm run dev, but sometimes an error will be reported. The error is as follows:
- Error reporting example:
Next, I will talk about the reason for the error.
Chapter 2 Learn More: Find and Solve Problems
- See the reason for the error and translate it
After translation, it is obvious that the error message says that our npm run dev: script lacks dev. We need to check whether there is dev in the script list and then run it.
- Post a question: Why does script have serve when npm run serve? How to check it?
- solve:
- 1. Look at the two files, the name must be `.env.${name}`
Description: .env.development configuration for development; .env.production configuration for production
What are these two files used for?
- 2. Find the script list--in the package.json file
--Note , the scripts in this file are the script list mentioned in the previous error report.
--And : xxx in npm run xxx can be understood as the key of the key-value pair . In fact, what is run is the value configured by scripts in package.json ;
--For example, npm run serve actually runs vue-cli-service serve; npm run build actually runs vue-cli-service build
-- When npm run dev, it is obvious that there is no key-value pair of dev in the script, so an error will be reported.
--The error report has been resolved, and you probably know the principle! !
Chapter 3 Supplement
Supplement 1: Explanation, easier to understand——
- npm run serve: When compiling, it will automatically load variables from the .env.dev environment.
- npm run build: Will automatically load environment variables in the .env.prod file during compilation
Supplement 2: When creating multiple environments for different tests——
Note that the build here is different from the one above. There is an additional build:preview command . Obviously, this command also has a corresponding .env.prview file. npm run build:preview: will automatically go to the .env.preview file during compilation. Load environment variables, use --no-module and --mode preview in the values for identification purposes
So when someone uses the command: npm run build:test, we need to see whether the key-value pairs in the scripts exist and meet the requirements.
Supplement 3: Project deployment