Description:
Use Project Vue-cli built in the local commissioning is OK after package after use Nginx release, specify the jump page is ok, but refresh the page when reload the page, error 404 page not found .
Nginx end of the log shows resource path can not be found.
Solution:
The first:
First, the cause of the problem is:
the Vue project, you can choose hash or history.pushState () to achieve routing jump.
Use history of pattern configuration is:
Export default new new Router ({
the MODE: 'history',
})
then, when we completed and deployed to the server npm run build, refresh the page under certain route, 404 or 502 errors.
This is because access to resources on the server when you refresh the page can not be found, because the path path vue-router settings is not real.
So the mode changed to hash pattern on it.
The second:
to continue to use history mode, modify Nginx configuration so that all requests are directed to the index.html page
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
You can use corresponding solutions according to their own situation.
