How to solve the problem that the page is blank after the routing History mode is packaged under Vue

This article mainly introduces the page that is blank after the routing History mode is packaged under Vue. The content is quite good. I will share it with you now and give it as a reference.

Vue's routing is in the default hash mode, and there is generally no problem with default packaging. However, the hash mode is unsightly because the URL will have a #, and there will be some problems when sharing on WeChat, authorizing login, etc. Pitfalls. Therefore, the history mode will also have some application scenarios. Newbies often encounter the situation where the page is blank after the history mode is packaged, and there is no error message for resource loading error.

In fact, if you study this carefully, you will find that If the project is placed directly in the directory, there will be no problem. If it is a subdirectory, it will be blank. Vue has an official explanation, and you need to add a base

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

This base is the project path.

After solving the above two problems, you will still find that only the home page can be accessed at this time. It is also possible to click on other routes through the home page, but If there is an error when refreshing in other routes, those who understand the history mode should also know that the history mode is the history.pushState of the h5 api. Compared with the browser simulating a history, but there is no such path resource on the real server, why is the hash mode Doesn't this problem exist? The hash mode is with #, which the server will not parse. Instead of just returning html, index.html will be parsed according to the vue route, while the history mode will request this address on the server. There is no such address on the server. Relevant paths will report errors. The official documentation of vue-router introduces various configurations, such as ngnix configuration

 location / {
 try_files $uri $uri/ /index.html;
}

The above is for direct projects The root directory is ok, but if the project is not the root directory there will still be problems,

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

The above is the project path named history, so After configuration, there will be no problem of blank pages after Vue packaging, and history routing can be freely accessed. However, remember what was said above. Non-root directory projects need to add the base path

or above. That’s the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to first screen optimization of Vue SPA single-page application

Vue implements a fixed number of input lines in textarea Ideas about adding underline styles

The above is the detailed content of How to solve the problem that the page is blank after the routing History mode is packaged under Vue. For more information, please follow other related articles on the PHP Chinese website!