vue打包项目后，宝塔面板里的Nginx下的接口反向代理如何设置？

场景描述：

vue开发H5页面过程中，需要用到加密解密接口，以及一系列反向代理配置。配置文件一般为——vue.config.js ; 如下：

const path = require('path');
let zipName = 'sdbf-h5';
module.exports = {
    css: {
        loaderOptions: {
          sass: {
            implementation: require('sass'), // 使用 dart-sass
          },
        },
    },
    
    transpileDependencies:['@dcloudio/uni-ui'],
    publicPath: './',

    //配置一些目录的精简访问方式
    configureWebpack: {
        resolve: {
            alias: {
                '@': path.join(__dirname, 'src'),
                'assets': path.join(__dirname, 'src/assets'),
                'components': path.join(__dirname, 'src/components')
            }
        },     
        devServer: {
            client: {
                overlay: false
            },
            //注意，配置反向代理后，需重新执行yarn serve 运行
            proxy: {
                '/nmediaapi': {     //资讯
                    target: "https://api.labi.com",
                    changeOrigin: true,
                    ws: true,
                },
                '/activityMallapi': {   //智能数据
                    target: "https://api.labi.com",
                    changeOrigin: true,
                    ws: true,
                },
                '/footballapi': {    //赛事              
                    target: "https://api.labi.com",
                    changeOrigin: true,
                    ws: true,
                },
                '/userapi': {        //用户          
                    target: "https://api.labi.com",
                    changeOrigin: true,
                    ws: true,
                },
                '/nmedia':{         //新媒体      
                    target: "https://api.labi.com",
                    changeOrigin: true,
                    ws: true,
                },
                '/recommendapi':{    //推荐          
                    target: "https://api.labi.com",
                    changeOrigin: true,
                    ws: true,
                }
            }
        }
    }
}

打包后，如上的配置，反向代理就要写进Nginx（或Apache）规则里了。

 

示例如下：

  location /nmediaapi {
        proxy_pass https://api.labi.com/nmediaapi;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    location /activityMallapi {
        proxy_pass https://api.labi.com/activityMallapi;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /footballapi {
        proxy_pass https://api.labi.com/footballapi;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    location /userapi {
        proxy_pass https://api.labi.com/userapi;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    location /nmedia {
        proxy_pass https://api.labi.com/nmedia;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    location /recommendapi {
        proxy_pass https://api.labi.com/recommendapi;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }