Vue项目实现统一管理请求的后端IP地址和端口

概述

在前后端分离的项目中，每个请求后端的方法都要写一次IP地址以及端口，后面如果要修改IP地址或端口号的话就要改很多个地方了，这样会很麻烦，进行统一管理是很有必要的

实现过程

新建JS文件

新建一个JS文件，命名为url.js，内容如下：

1
2
3

export function getServerUrl(url) {
  return "http://localhost:8080/" + url;
}

引入

首先在对应的页面引入上面的JavaScript文件，在<script></script>内使用以下代码引入

1	import {getServerUrl} from "@/config/url";

在最上面引入，如下图所示

使用

例如我们要请求的后端路径为http://localhost:8080/user/login，那么使用的格式如下：

1	let url = getServerUrl("user/login");

上面的url就可以在axios请求中使用了

PS.

如果请求的后端IP地址和端口有多个，那么我们可以再传入一个参数，以这个参数为条件选择对应的IP地址和端口

export function getServerUrl(url, moudle) {
  if (moudle === "miaosha-user") {
    return "http://localhost:8081/" + url;
  }
  if (moudle === "miaosha-goods") {
    return "http://localhost:8082/" + url;
  }
  if (moudle === "miaosha-order1") {
    return "http://localhost:8083/" + url;
  }
}