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/…