侧边栏壁纸
博主头像
分享你我博主等级

行动起来,活在当下

  • 累计撰写 106 篇文章
  • 累计创建 13 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

VUE 打包后继续使用代理

管理员
2021-09-16 / 0 评论 / 0 点赞 / 6 阅读 / 3571 字

vue.config.js的 devServer 节点配置如下:

devServer: {
    port: 9011, // 端口号
    https: false, // https:{type:Boolean}
    open: "Google Chrome", //配置自动启动浏览器
    openPage: "/", //指定打开浏览器时要导航到的页面
    proxy: proxyConfig.proxyList
  },

proxyConfig.js

module.exports = {
  proxyList: {
    "/api": {
      target: `${process.env.VUE_APP_BASE_URL}`, //设置调用接口域名和端口号别忘了加http
      secure: false, // 如果是https接口,需要配置这个参数
      changeOrigin: true,
      ws: true,
      toProxy: true,
      pathRewrite: {
        "^/api": "/"
      }
    },
    "/apis": {
      target: `${process.env.VUE_APP_BASE_URL}`,
      secure: false,
      changeOrigin: true,
      ws: true,
      toProxy: true,
      pathRewrite: {
        "^/apis": "/"
      }
    }
  }
};

打包发布后需要在nginx配置文件中加入如下配置:

 location /api/{
                   rewrite ^/api(/.*)$ $1 break;
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded $proxy_add_x_forwarded_for;
          proxy_pass http://*.*.com; #请求地址
        }
      location /apis/{
                      rewrite ^/apis(/.*)$ $1 break;
              proxy_redirect off;
              proxy_set_header Host $host;
              proxy_set_header X-Real-IP $remote_addr;
              proxy_set_header X-Forwarded $proxy_add_x_forwarded_for;
              proxy_pass  #请求地址 
      }


0

评论区