The route of Vue is in the default hash mode. Generally, there is no problem with the default packaging, but the hash mode is not beautiful because the URL has a #, and there are some pits in wechat sharing and authorized login. So the History mode also has some application scenarios. Newbies often encounter a blank page after the History mode is packaged, with no resource loading error message. In fact, a careful study 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. There is an official explanation for this VUE, which needs to add a base

// base: '/history',
// mode: 'history'.Copy the code

This base is the project path. It is also possible to click on other routes through the home page. However, if you refresh other routes, there will be an error. If you know history mode, you should also know that history mode is h5 API History. pushState: The browser emulates a history, but the real server does not have this path resource. Why not hash mode? HTML will be parsed according to the vUE route, while history will request the address on the server. If there is no path on the server, an error will be reported. The official documentation for vue-Router describes various configurations, such as Ngnix configuration

location / {
  try_files $uri $uri/ /index.html;
}Copy the code

This is fine for the root of the direct project, but there is still a problem if the project is not the root,

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; }}Copy the code

The path name of the project is “history”, so that there will be no blank page after the vUE package is configured. The “history” route can be accessed freely, but remember that the path of the non-root project needs to be added to the base

Look at the original blog.noob6.com/2018/06/05/…