Vue-route+webpack Deploying a single-page routing project with 404 issues with Access refresh

Problem Description:
The front-end colleague uses the Vue.js framework to write a single-page routing project with Vue-route combined with Webpack, which assists in configuring Nginx on the server side. After the deployment is complete, access to the home page is no problem, from the homepage to open two-level pages no problem, but all the two-level page opened, again refreshed, there will be 404 phenomenon! As follows:

Cause of the problem:
The resource accessed when the page was refreshed is not found on the server because the path set by Vue-router is not the actual path.
As above the 404 phenomenon, because in the Nginx configuration root directory/data/app/xqsj_wx/dist below there is no loading this real resource exists, these access resources are rendered in JS.

The first configuration of the service-side Nginx is as follows (assuming the domain name is: testwx.wangshibo.com):
[Email protected] ~]# cat/data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf
server {
Listen 80;

server_name testwx.wangshibo.com;
Root/data/app/xqsj_wx/dist;
Index index.html;

Access_log/var/log/testwx.log main;

}

The reason for the appearance of 404 is because there is no loading in this domain root directory/data/app/xqsj_wx/dist The real directory exists .

Problem solving:
In the Nginx configuration add Vue-route Jump settings (here the first page is index.html, if it is index.php in the following corresponding location replacement), the correct configuration is as follows (add the following red content):
[Email protected] ~]# cat/data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf
server {
Listen 80;

server_name testwx.wangshibo.com;
Root/data/app/xqsj_wx/dist;
Index index.html;

Access_log/var/log/testwx.log main;

Location/{
Try_files $uri $uri/@router;
Index index.html;
}

Location @router {
Rewrite ^.*$/index.html last;
}

}

After restarting Nginx, the problem is solved.

Vue-route+webpack Deploying a single-page routing project with 404 issues with Access refresh