Situation statement

insert image description here
nginx deploys the vue project, the file is placed in the nginx.conf file in the dist folder under html , the location of the configuration file in the server, request cross-domain and other information

Solution for this case

After starting the project, because the configuration is root, first of all, the sys-test folder under html cannot be found, and then after the configuration is changed to alias configuration, the refresh will report a 404 error, and the final configuration is as follows, successfully resolved

insert image description here

configuration explanation

Why is there a 404 situation?

Because after packaging and deployment, the address in the address bar is just the route of vue, not the real file directory address. All routes are dependent on the index.html of the SPA single page application. So when refreshing, according to the address in the address bar, if the corresponding file cannot be found, 404 will be generated.
Solution: Configure try_files in nginx and let it search index.html uniformly. (That is, when you can’t find it according to the path, go to index.html)

The difference between root and alias

The main difference is how nginx interprets the uri behind the location, which will cause the two to map requests to server files in different ways.
As the following root configuration

location /sys-test {
    
    
    root   html;
    index  index.html;
}

The place to find this is to add the value of the root configuration and the value of the location configuration, that is, go to html/sys-test to find

If it is the following alias configuration

location /sys-test {
    
    
    alias html/dist;
    index  index.html;
    try_files $uri $uri/ /dist/index.html;
}

After the alias is configured, the path of the resource is the path configured after the alias, that is, go to html/dist to find

The role of try_files configuration

The role of the try_files configuration is to check whether the files exist
in order, accompanied by a simple example to explain:

下面的配置意思就是:
当我们访问一个地址为 http://localhost:8888/sys-test/login 
1. 先通过alias 确定路径 html/dist 
2. 然后通过try_files配置，首先会在html/dist下去找 $uri，也就是login这个文件
3. 这个时候因为没有login文件，就会去找 $uri/ ，也就是 /login/ 这个文件目录
4. 如果还是没找到，就会将其重定向到 @router
5. 在定义的 @router 里，我们将其都指向 /dist 文件夹下的 index.html。这样就成功解决问题！

/*
location /sys-test {
    alias html/dist/;
    index   index.html;
    try_files  $uri $uri/ /dist/index.html;
    // $uri 代表访问的文件地址
    // $uri/ 代表访问的文件目录
}
*/

location /sys-test {
    
    
    alias html/dist/;
    index   index.html;
    try_files  $uri $uri/  @router;
    // $uri 代表访问的文件地址
    // $uri/ 代表访问的文件目录
}
location @router {
    
    
     rewrite ^.*$ /dist/index.html;
     // 匹配所有  /dist/index.html;
}

friendly reminder

If you encounter some problems when configuring nginx by yourself, you can first find the error.log file under the logs folder, check the error message, locate the cause of the error, make adjustments or Baidu

When nginx deploys the vue project, when the routing mode is history, the page refreshes 404 problems

Table of contents