nginx deployment vue-router history mode reports 404 nginx try_files file path details and the role of publicPath in vue.config.js

Ask ChatGPT:

Can you explain the try_files directive in detail?

ChatGPT answered:

When Nginx handles a client request, try_filesdirectives are used to try to find files in a specified order and return the content if a matching file is found, or perform an alternate action if no matching file is found. Typically, try_filesdirectives are used in the configuration of a static file server to determine how to respond to user requests.

try_filesThe syntax of the command is as follows:

Copy code

try_files file ... uri;

• file ...: This is one or more file paths, separated by spaces. Nginx will try to find these files in the order specified. If any file is found, Nginx will return the contents of that file.

• uri: This is an alternate action, performed when no matching file is found. Typically, this is a URL path, which can be relative (relative to the server's root directory) or absolute.

try_filesThe execution flow of the instruction is as follows:

1. fileNginx will try to find the files listed in the path in the order specified . If a matching file is found, it returns the contents of that file.

2. If filenone of the files in the path is found, Nginx will perform an alternate operation, that is, uriprocess according to .

In general, try_filesthe common usage is:

nginxCopy code

try_files $uri $uri/ /fallback-path;

In this example:

• $uri: Nginx will try to find the file corresponding to the requested path.
• $uri/: Nginx will try to find the directory corresponding to the request path plus a slash (usually used to find the default file in the directory).
• /fallback-path: If none of the previous searches are matched successfully, Nginx will perform a backup operation and use this path for processing.

a few key points

file...

This means that the parameters in the middle of try_files are all files, not paths. The purpose of this instruction is to find the file.

location /abc {
    root /data/www/team/;
    try_files 1.html 2.html @qwe;
}和
location /abc {
    alias /data/www/team/;
    try_files 1.html 2.html @qwe;
}区别

rootaliasThe usage in Nginx configuration is very similar, but they have some differences in handling requests . Here are the main differences between the two configurations:

Use root:

location /abc {
    root /data/www/team/;
    try_files 1.html 2.html /forward_uri;
}

• When using rootthe directive, Nginx will map the requested URI path directly to the file system path, and then look for files based on the file system path. Therefore, the request /abc/1.htmlwill /data/www/team/abc/1.htmllook for files under the path.
• rootUsually works directly if the directory structure contained in the URI path matches the file system path

Use alias

location /abc {
    alias /data/www/team/;
    try_files 1.html 2.html /forward_uri;
}

• When using aliasthe directive, Nginx will aliasmap the requested URI path according to the path provided by the directive. Therefore, the request /abc/1.htmlwill /data/www/team/1.htmllook for files under the path.
• aliasThe mapping between URI paths and file system paths can be more precisely controlled independent of the directory structure in the URI paths.

In summary, the difference between the two is how the file system path is constructed. rootwill add the requested URI path directly to the root path, and aliaswill replace parts of the URI path and aliasbuild the file system path based on the path provided by the directive. Depending on your needs, you can choose the appropriate directive to handle file system path mapping.

Let’s understand $uri and $uri/

$uri is a variable, which refers to all the above files such as 1.html and the files of 1.html/index.html. 1.html/ is a bit strange. Change geoip and geoip/index.html. Is there such a thing? A file without a suffix? the answer is yes

This kind of file exists. Of course, it can also be a folder geoip/index.html, so these types $uri and $uri/ can be included, even including their subdirectories. This is how to find the file, or find the file and return Go, or find index.html in this directory and return

/forward_uri 

 This probably detours a lot of people, because there is an alias path above, and we naturally think it is still under this path, but it is actually relative to the domain name, so if your vue-router you want to put it under a certain path, for example, under the /admin prefix , then when the above file... cannot be found, the jump is

https://xxx.example.com/admin/index.html, if you write /index.html, the jump will be

https://xxx.example.com/index.html This is naturally a path that cannot be found, so 404 is reported.

So you want to configure it as

Project A

http://xxx.example.com/A

Project B

http://xxx.example.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;
    }

In this way, vue-router and history secondary route /admin/dashboard (cannot find dashboard or dashboard/index.html) can be correctly jumped to the file /admin/index.html, which has been cached by the browser. , so the browser will not initiate a request again, but directly run the local index.html. The js in index.html will obtain the uri in the URL column, and then perform routing matching to achieve interface changes;

Only after js is run can the route /admin/dashbord be recognized.

Why do you need to configure `publicPath:"/admin"` on the vue side? Because the default loaded shard js path is relative to the root path /. You still have to go to /js/2ea8e923cad.js to find it. The full path is

https://xxx.example.com//js/2ea8e923cad.js Nginx does not recognize this path and returns 404 directly. The actual path should be

https://xxx.example.com//admin/js/2ea8e923cad.js So how can the code packaged by vue automatically add the prefix /admin before the imported sharded js?

That is to configure publicPath: "/admin" in vue.config.js. This is the meaning of publicPath.