Go in and use Nginx to configure and deploy vue; due to the special project structure, an index.html and a manage.html appear after packaging (required by the project); after deployment, the related functions of manage.html cannot be previewed normally; click to report 404;
After searching for information on the Internet, it works in person; let’s take a look at the specific operations below;
Add new configuration in nginx configuration file
1. Solve the access 404 problem
Modify in nginx.conf; because I am using the pagoda panel here, I add it directly. If it is a separate nginx, you need to add the following configuration in the corresponding service project of location /
#solve the problem of 404 when refreshing the subpage
try_files $uri $uri/ @router;
Add the corresponding implementation in the outermost layer;
To be at the same level as location /{}
location @router {
rewrite ^.*$ / last;
}
The above configuration is to solve the access 404 problem;
2. Secondary page access configuration access;
Add location /manage at the same level as location /{} { index manage.html; try_files $uri $uri/ /manage.html; }
1. The location /manage here is the homepage address of the secondary page accessed by our url path;
2. This manage.html is our secondary page homepage
index manage.html;
3. This sentence is to solve the jump 404 problem; without adding this sentence, the sub-page will not be displayed; only the main page information will be displayed;
try_files $uri $uri/ /manage.html;
3. After modifying the configuration, you need to execute
nginx -t
Execute again
nginx -s reload
Now that the configuration is complete, visit it and everything is fine!