Routing mode
As we all know, route mode single-page browser application under the following two: hash mode and history mode. hash pattern common good, and not dependent on the configuration server, worry and effort, but the disadvantage is not enough elegance. Compared to hash mode is, history mode is more beautiful.
However, history mode is also there is a problem, that is, when the page is refreshed, if no suitable configuration, will be 404 pages of errors. Hence the need for additional server configuration, can not be found for url, will return home html.
Next, in order to let nginx for example, says it needs to be configured when the history mode.
location
location located http-> server block syntax is as follows:
Syntax: location [= | ~ | ~* | ^~] uri { ... }
location @name { ... }
Default: —
Context: server, location
[= | ~ | ~ * | ^ ~], Is a modifier, the control sequence may nginx match. About four priority meaning modifiers, refer to this article . But more recited herein, the following short when a plurality of server location, nginx The match will uri accuracy and modifiers. Find and order of priority as follows:
And priority search order
1: an exact match with the "=" Priority
2: no modifier, who who is more accurate priority, such as / and / post, the post Priority
3: according to their regular expression defined in the configuration file sequence
4: with "^ ~" modifier, the beginning of the match
5: with "~" or "~ *" modifier, if the regular expression matching URI
6: no modifier, if the specified string match the beginning URI
try_files
try_files solve is: When nginx client can not find the resources needed to do the how question. Route to history as an example: If your url is the page http://www.example.com/postthat your nginx configuration is as follows:
location / {
root local/web/dist
}When you refresh the page in a post route, nginx returns 404. It specifies the root / static resource corresponding to a single page directory, so that dist url mapped to the directory. This configuration lets you project css, js is successfully loaded, but encountered the above URL, nginx on a loss. Because our dist folder below did not post the file or folder, so nginx will give you a 404 page. try_files is to solve this problem, try_files syntax is as follows:
location / {
try_files $uri $uri/ /index.html;
}
To the above http://www.example.com/post, for example, $ uri would match to post, nginx found dist directory under the following did not post this file, there is no post this folder, it will eventually return index.html under the dist directory. In this way, index.html after being loaded, the browser will work the front end of the route, it loads the resources required by the user. And we build out the css, js files, as can be found nginx correct, will not be affected.