nginx configure vue front-end proxy

Background: Make a project with front-end and back-end separation . Here is a front-end project created by vue3 + view + ts, and configure cross-domain requests on the front end.

1. Development stage
Configure the proxy of devserver in vue.config.js to configure proxy requests, and then change all requests to start with /api. But this configuration only works during the development phase. Therefore, when deploying on nginx , you need to reconfigure the request proxy.

The code configuration in vite.config.ts is as follows:

devServer: {
        port:8089, // 启动端口
        open:true,  // 启动后是否自动打开网页
        proxy: {
            "/api": {
                target: "http://192.168.xx.xx:8083", // 如果访问/api就在其前面加target
                changeOrigin: true, // 跨域
                pathRewrite: {
                    "^/api": '' //再把访问路径中的/api替换掉
                }
            }
        }
    },

2. nginx configuration agent
Because it is the first time to configure nginx by myself (previously, it was packaged and handed over to the backend for configuration), so I searched for a solution online and found it to be very simple at first glance. So I made the following configuration in nginx.config:

server {
        listen       8001;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
		
		location /api {
            proxy_pass http://192.168.xx.xxx:8083;
        }

At first glance, there is no problem. However, requesting the backend interface to send will report a 404 error. As a result, I was puzzled and could only Baidu Baidu and Baidu again. Finally, just add a / after the path of /api and its proxy. Although it sounds easy to say, when I tried it myself, it was really a bit uncomfortable. Configuration file, don't miss even a single slash.
The correct configuration is as follows:

    server {
        listen       8001;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
		
		location /api/ {
            proxy_pass http://192.168.31.126:8083/;
        }

3. Solve the problem of refreshing the browser.
After configuring the above configuration, I found that when I clicked the browser refresh button, the 404 page failed and the original webpage could not be returned. As shown in the picture:

The following configuration is required:

location / {
            root   html;
            index  index.html index.htm;
			
			# 方便界面文件路径查找
			try_files $uri $uri/ @router; 
            index  index.html ;
        }
#因此需要rewrite到index.html中，然后交给路由在处理请求资源
     location @router {
         rewrite ^.*$ /index.html break;
     }

4. Match file path

• If vue-router uses hash mode, you can set publicPath in vue.config.js to an empty string ('') or a relative path ('./'), so that all resources will be linked to relative paths, like this The generated package can be deployed in any path.
• If you use the history mode, the static resources in the production environment (js and css packaged into chunks) are linked to the '/' absolute path. At this time, if you directly click index.html to find the resource, you need to use nginx to cooperate.

location / {
            root   html;
            index  index.html index.htm;
			
			# 方便界面文件路径查找
			try_files $uri $uri/ @router; 
            index  index.html ;
        }

In fact, the configuration at this time has no effect because the resources are in the root directory of the server by default. However, when nginx proxies multiple services and the file structure in HTML is relatively complex, relative configuration of try_files is required.

5. Caution

• Although you configure the proxy, the routing address before configuration (usually localhost) is always displayed in the network. So it is easy to mislead newbies!
• Static resource files (such as printer configuration files .lbx) introduced into the vue project should be placed in the static folder in the public directory. After packaging, it will also appear in the static folder in the output folder (dist) (by default, it can be configured using webpack). In the code, use location.origin to splice the path under the static folder and then import it.