Vue,react,angular,windows environment Local Configuration single page application

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.