Background Description: In order to study the content of pre-rendering, the front-end framework of the original project is Vue + VUe-Router, and the vue-Router mode needs to be changed to History. However, this mode requires the cooperation of background configuration. Since the project I built is a single-page vUE application, there is only one path on the server after packaging. When changing the URL to request static resources to the service will not succeed, when the server can not find the corresponding resources will return 404;

By querying the network to find a solution to this problem vUE official website solution

As shown above, the official website solution is to set up the above configuration in Nginx, combined with my own project, here is my own configuration

Because I use nginx reverse proxy to prerend the domain name by adding a level of directory to the domain name, I add/PRERend to the domain name



The most key 

try_files $uri $uri/ /index.html
Copy the code

$uri indicates what matches the current route, for example:

The current routing for http://www.juejin.im/prerend, at this time$uri= http://www.juejin.im/prerend;Copy the code

$uri/ = $uri/ = $uri/ = $uri/ = $uri/ = $uri/ = $uri/ = $uri/ And load the home page resources, note:

/index.html corresponds to the path set by root aboveCopy the code

The chrome check window was opened and there was an error, as shown below:




Under static thinking about, because for the first time enter www.xxx.com/prerend newsletter can load a resource, and can jump to www.xxx.com/prenrend/home (because the front projects have redirected), but will appear again to refresh the above problems, So I looked at the resource request for the first successful load and it looked something like this


To sum up, in fact, it is the negligence of front-end packaging configuration that has caused a series of problems, which is caused by the ambiguity of knowledge points. Therefore, we should grasp every detail in our daily work and study, and only after solving the difficulties can we really take a step forward