Solution to vue refresh 404 problem

The content of this article is about the solution to the problem of vue refresh 404. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Problem description

Using vue-route combined with webpack to write a single-page routing project, operation and maintenance assisted in configuring nginx on the server side. After the deployment is completed, it is no problem to access the homepage and open the secondary pages from the homepage. However, after all the secondary pages are opened and refreshed again, the 404 phenomenon will appear!

2. Cause of the problem:

The resources accessed when refreshing the page cannot be found on the server because the path set by vue-router is not a real path.

3. Solution:

Add the jump setting of vue-route in the nginx configuration (the homepage here is index.html, if it is index.php, replace it in the corresponding position below), The correct configuration is as follows

location / {
    try_files $uri $uri/ @router;
    index index.html;
}

location @router {
    rewrite ^.*$ /index.html last;
}

This article has ended here. For more other exciting content, you can pay attention to the JavaScript Tutorial Video column of the PHP Chinese website!

The above is the detailed content of Solution to vue refresh 404 problem. For more information, please follow other related articles on the PHP Chinese website!