SoFunction
Updated on 2025-03-10

vue-router+nginx non-root path configuration method

vue-router's default data hash pattern - uses the hash of the url to simulate a complete URL, so when the URL changes, the page will not reload.

Generally speaking, we don’t like ugly hash, which is similar to #/matchResult, and can use the history mode of the routing. The history mode uses API to implement page redirection.

But there is a problem. When using nginx, we need to add some configuration.

Configure directly in the root path

It is directly configured in the root path. Only input is used when accessing. The configuration in nginx is as follows

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

Non-root path configuration

If there are multiple projects under a domain name, then using the root path configuration is not appropriate. We need to specify a layer of path under the root path, for example

Project A

/A

Project B

/B

nginx configuration

  location ^~/A {
      alias /XX/A;//This is the path of A      index ;
      try_files $uri $uri/ /A/;
  }
  location ^~/B {
      alias /XX/B;//This is the path of B      index ;
      try_files $uri $uri/ /B/;
  }

tip: Note that you should use alias, not root

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.