Solution to the blank page after the History mode package under Vue

In the default hash mode, there will generally be no problem with the default package. However, the hash mode has a # because the URL will have a #, which is not beautiful, and there will be some pitfalls on WeChat sharing, authorized login, etc. Therefore, the history mode will also have some application scenarios. Novice will often encounter the blank page after the history mode is packaged, and there is no error message for error loading.

In fact, after careful study, you will find that if the project is placed directly with the directory, then there is no problem. If it is a subdirectory, then it will be blank. This vue official has an explanation and needs to add a base

// base: '/history',
// mode: 'history',

This base is the project path.

After solving both of the above, you will still find that only the homepage can be accessed at this time. Clicking in other routes through the homepage is also OK, but if there is an error in other routes refresh, this person who understands history mode should also know that history mode is h5 api, and the browser simulates a history, and there is no resource on the real server. Why does the hash mode not have this problem? The hash mode has #, and this server will not parse. Compared with the html, it will be parsed according to the vue route. History mode will request this address on the server. If there is no relevant path on the server, an error will be reported. The official document of vue-router introduces various configurations, such as the configuration of ngnix

 location / {
 try_files $uri $uri/ /;
}

The above is OK for the root directory of the project, but if the project is not the root directory, there will still be problems.

location /history {
   root C:/web/static;
 index  ;
 #error_page 404 /history/;
 if (!-e $request_filename) {
  rewrite ^/(.*) /history/ last;
  break;
 }
}

The above is the project path name is history, so that after configuration, there will be no problem with the page blank after vue packaging, and history routes can also be accessed freely. However, remember what you said above, non-root directories need to add a base path

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.