Solution to the problem of request interface 404 and refresh page 404 after vue3 deploys the pagoda

Technology: vue3.2.13
UI framework: element-plus 2.1.1
Server: Tencent Cloud Centos system + pagoda panel
Nginx: 1.22.1

Premise: Pagoda Panel == "The website PHP project has created a new project

1. Handle vue page refresh error 404

As shown above, in the PHP website == "Settings == "configuration file, add the following code to solve the problem of refreshing the error page 404

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

2. Handle the problem of error 404 reported by the vue page request interface

As shown above, in the PHP website == "Settings == "configuration file, add the following code to solve the problem of refreshing the error page 404

// 这里做完记录贴实例，只写一个，实际上项目proxy里几个代理，则写几个
location ^~/blogApi/ {
    
    
    proxy_pass http://localhost:5009/;
}

My vue.config.js configuration is as follows

// 这里做完记录贴实例，只写一个，实际上项目proxy里几个代理，则写几个
 "/blogApi": {
    
    
        target: process.env.VUE_APP_API_BASE_URL,
        changeOrigin: true, // 是否跨域
        secure: false, // 如果是https接口，需要配置这个参数
        pathRewrite: {
    
    
          "^/blogApi": "",
        },
      },

3. Save after the above processing is completed, and then refresh the request interface on the login page

页面刷新正常、接口请求code200 则说明配置成功！