One, the cause: The project uses Vue, and react. Build a single page app. In the Nginx environment, there is only one index.html entrance. This time the default is able to access the Vue, and the react route
The first page in the configuration. The internal connection is also able to jump but not to refresh the face. After the page is refreshed, it becomes a 404 page.
Second, the reason: Nginx in the resolution of the path: for example: localhost/a this route. In fact, nginx in the parsing path. Look for a file to go down root path. But I can't find them. All will be an error.
But in a single-page application, localhost/a is actually a routing rule developed within VUE, and react. This time There is a problem. How do I configure it?
Third, the configuration file.
Server {Listen80; server_name localhost; Location/{root HTML; Index index.html index.htm; } Location/home {rewrite. */index.html break;root html; } Location/strategy {rewrite. */index.html break;root html; } Location/wealthmange {rewrite. */index.html break;root html; } Location/aboutus {rewrite. */index.html break;root html; } Location/contacts {rewrite. */index.html break;root html; }Error_page502 503 504/50x.html; Location =/50x.html {root html; } }
By rewrite .* /index.html break;
rewriting everything to the path /index.html
, break
It is important that it makes the URL match end, and the final service returns the document actually /htm/index.html
.
That break
determines the browser URL is constant, and HTTP response to the document is actually index.html, and the browser path, will be automatically vue-router processing, do not refresh the jump, we see the result is the path corresponding to that page!
location/home { rewrite. */index.html break; root html;}
When our browser input such localhost/home is redirected to rewrite. */index.html break; root html; Equivalent to our home page. Just kind of OK.
Vue,react,angular,windows environment Local Configuration single page application