返回

Vue后端管理项目中搞定配置多端口号困扰，从此办公无忧

前端

配置 Vue 后端管理项目的多个端口号：告别繁琐

作为 Vue 后端管理项目开发人员，您是否曾因配置多个端口号而苦恼不已？同时运行前端和后端服务时，切换不同端口号往往令人头痛。不过，通过本文提供的解决方案，您将能轻松解决这一问题。

问题背景

过去，我们使用拼接简写的方式来配置端口号，这给使用多个端口号带来了不便。例如，在尚品汇项目中，代码如下所示：

// vue.config.js
proxyTable: {
  '/api': {
    target: 'http://localhost:' + process.env.VUE_APP_SERVER_PORT
  }
}

解决方案

一位经验丰富的开发者为我们指明了方向，我们对代码进行了如下修改：

// vue.config.js
proxyTable: {
  '/dev-api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    pathRewrite: {
      '^/dev-api': ''
    }
  },
  '/dev1-api': {
    target: 'http://localhost:8081',
    changeOrigin: true,
    pathRewrite: {
      '^/dev1-api': ''
    }
  }
}

// request.js
const baseURL = process.env.VUE_APP_BASE_API;

跨域代理配置

首先，我们在 vue.config.js 文件中配置跨域代理，允许前端访问后端服务：

devServer: {
  proxy: {
    '/dev-api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      pathRewrite: {
        '^/dev-api': ''
      }
    },
    '/dev1-api': {
      target: 'http://localhost:8081',
      changeOrigin: true,
      pathRewrite: {
        '^/dev1-api': ''
      }
    }
  }
}

Request.js 配置

接下来，我们在 request.js 文件中配置请求基准 URL：

const baseURL = process.env.VUE_APP_BASE_API;

多个端口号引用

在引用接口时，我们在 URL 前补充对应的端口号前缀：

// 登录接口
this.$request({
  url: '/dev-api/login',
  method: 'post',
  data: {
    username: 'admin',
    password: '123456'
  }
});

// 商品列表接口
this.$request({
  url: '/dev1-api/products',
  method: 'get'
});

总结

通过这些步骤，您可以在 Vue 后端管理项目中轻松配置多个端口号。这种方法不仅简化了代码，还提高了开发效率。希望本文对您有所帮助，让您在 Vue 后端管理项目开发中游刃有余。

常见问题解答

  1. 我无法在多个端口号之间切换，该怎么办？
    确保您在 vue.config.js 文件中正确配置了端口号代理，并且在 request.js 文件中设置了正确的基准 URL。
  2. 跨域代理无法工作，提示“CORS header 'Access-Control-Allow-Origin' missing”错误。
    检查您的后端服务器是否正确设置了 CORS 头。
  3. 为什么我必须在每个请求 URL 前加上端口号前缀？
    这是跨域代理的限制，它要求您指定代理目标 URL 的端口号。
  4. 如何配置动态端口号？
    您可以使用 process.env.PORT 环境变量从环境中获取端口号。
  5. 是否可以通过其他方式配置多个端口号？
    有一种方法是使用 Nginx 或 Apache 等 Web 服务器作为代理，但这种方法更复杂。