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;}