About the configuration method of vue-router+nginx non-root path

This article mainly introduces the non-root path configuration method of vue-router nginx. The content is quite good. I will share it with you now and give it as a reference.

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

Generally, we don’t like ugly hashes. Similar to index.html#/matchResult, you can use the history mode of routing. History mode uses the history.pushState API to implement page jumps.

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

Configure directly under the root path

Configure directly under the root path. When accessing, just enter http://yoursite.com, in nginx The configuration is as follows

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

Non-root path configuration

If there are multiple projects under a domain name, then it is not appropriate to use the root path configuration, we need Specify a one-level path under the root path, for example

A project

http://yoursite.com/A

B project

http://yoursite.com/B

nginx configuration

  location ^~/A {
      alias /XX/A;//此处为A的路径
      index index.html;
      try_files $uri $uri/ /A/index.html;
  }
  location ^~/B {
      alias /XX/B;//此处为B的路径
      index index.html;
      try_files $uri $uri/ /B/index.html;
  }

tip: Be careful to use alias and not root

The above is the entire content of this article, I hope It will be helpful for everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the construction, packaging and publishing process of vue projects

About vue v-model Introduction to dynamic generation

#

The above is the detailed content of About the configuration method of vue-router+nginx non-root path. For more information, please follow other related articles on the PHP Chinese website!