preface

As we know, vue single-page applications are static resources packaged and generally accessed by NGINx or other servers. If the Vue Router is in History mode, there is an additional configuration. Every detail of the configuration process is recorded here. I hope some of my understanding can help others with the same problem.

Static resource

We first need to configure how to access the static resources that we have packaged.

The basic configuration

When a URL does not need a prefix, the basic configuration looks like this:

server {
    listen       80;
    server_name testhistory.com;
   
    location / {
      root /Users/admin/www/h5;
      indexindex.html; }}Copy the code
  • Root: indicates the location of static resources
  • Index: You can access index.html by using index, which is usually omitted

Then configure Host:

127.0.0.1 testhistory.com
Copy the code

You can access the page at testhistory.com.

Prefixed access path

Sometimes, there may be multiple front-end services under the same domain name. At this time, we will tell Nginx to load or reverse proxy to the corresponding resources through the prefix (for example, the front-end projects corresponding to different city businesses of our company are different).

Prefixed static resource configuration:

    location /h5 {
      root /Users/admin/www;
      index index.html;
    }
Copy the code

The difference is that when there is a prefix, the actual access path is prefixed to the root path. So here, root will drop /h5. If you don’t want to add a prefix, you can use the alias directive:

    location /h5 {
      alias /Users/admin/www/h5;
      index index.html;
    }
Copy the code

When accessed through testhistory.com/h5, you can see that index.html is accessed correctly.

However, js and CSS access is problematic because static resources are actually in the H5 directory, and resources referenced in the packaged index.html are not prefixed with h5.

It’s as simple as configuring the common resource directory in vue.config.js:

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
    ? '/h5/'
    : '/'.outputDir: 'h5'.// With this configuration, the packaged directory is changed from the default dist to h5 to facilitate writing deployment scripts. }Copy the code

In addition to the JS and CSS common resource directories, the basic prefix must be added to the route configuration to ensure the consistency of front-end routes and servers:

const router = new VueRouter({
  base: 'h5',
  routes
})
Copy the code

Then visit testhistory.com/h5.

Use root or alias

Both the root and alias directives can be used.

  • If there is no prefix, root is used, which is the same as alias.
  • When there is a prefix, root should be used if the prefix name is the same as the last path of the directory path, and alias. Should be used if not.

The History mode

To enable History mode, the vue router configuration is as simple as adding the following sentence:

mode: 'history'.Copy the code

Access is normal at development time, but when packaged and deployed, you will find when:

  • Visit testhistory.com/h5, normal;
  • Then jump route to testhistory.com/h5/about, also normal;
  • Refresh testhistory.com/h5/about and you get 404.

try_files

Why does this happen? Because static resources are accessed through nginx at refresh time, this path is obviously not found because it is only a front-end route. To solve this problem, we need to access the main entry of index. HTML when accessing the front-end route, and then the front-end route itself comes to the corresponding page. Nginx uses the try_files directive.

Let’s look at the configuration with try_files:

location /h5 {
  root /Users/admin/www;
  index index.html;
  try_files $uri $uri/ /h5/index.html;
}
Copy the code

After matching, you can visit testhistory.com/h5/about normally.

Uriuri / /h5/index.html (try_files uriuri uriuri/ /h5/index.html)

try_files file... uri
Copy the code

This grammar means:

  • Try_files can define multiple file paths and the last URI as an internal jump, where the file path is constructed with the alias and root directives together;
  • Multiple files request the first file found;
  • The file ends with a “/” to check whether the directory exists.
  • When none of the files can be found, an internal jump request is made with the last URI.

Take our example:

  • I defined thetry_files $uri $uri/ /h5/index.htmlThe root is/Users/admin/www ；
  • Defines two files,
    u r i and Uri and     Uri, my access pathTesthistory.com/h5/about, $uri 是 /h5/aboutThe root directory cannot be found.$url/The corresponding directory cannot be found;
  • The file can’t be found, so jump to internal/h5/index.html“Is equivalent to internal requestTesthistory.com/h5/index.ht…

conclusion

There are a lot of nginx instructions. If you need to understand them, you need to go to the official website to search for them one by one and try to combine them. You can understand them more thoroughly by learning from actual use scenarios. This article involves the difference between root and Alisa, index instruction, try_files instruction, static resources, and how to configure the combined instruction of history mode. If there is something wrong, please point it out. Thank you.

reference

  • Alias directive
  • Root instruction
  • Try_files directive
  • The index instruction
  • $URI variable, see bottom