vue代理后为什么还是原来的端口

Vue.js 是一种用于构建用户界面的渐进式框架，常用于开发单页面应用。在开发过程中，我们有时候需要使用代理（proxy）来解决跨域的问题。然而，在使用代理后，有些开发者可能会遇到一个问题，就是代理后为什么还是原来的端口呢？下面我将解答这个问题。

首先，我们需要了解一下 Vue.js 中代理的原理。在开发环境中， Vue.js 提供了一个简单易用的代理配置方式，即通过配置 vue.config.js 文件实现。我们可以在该文件中使用 devServer.proxy 属性来配置代理。

然而，代理只是在开发环境中起作用，并不会对打包后的生产环境产生影响。因此，当你使用代理进行跨域请求时，只会在开发环境中生效。在生产环境中，你需要自行解决跨域的问题。

其次，代理只是将你的请求转发到指定的目标服务器上，并没有改变请求的端口。换句话说，代理只是起到了中间转发的作用，而不会改变原本请求的端口号。因此，即使使用了代理，请求依然会发送给原本的端口。

那么，为什么我们需要使用代理呢？其主要原因是为了解决同源策略下的跨域问题。同源策略是一种约定，限制了不同源之间的资源共享。当我们遇到跨域请求时，浏览器会拒绝响应该请求，这就导致了一些问题。而使用代理可以在开发过程中绕过浏览器的同源策略，从而实现跨域请求。

总结一下，Vue.js 的代理只是在开发环境中起作用，不会改变原本请求的端口号。它的作用主要是解决跨域问题，绕过浏览器的同源策略限制。需要注意的是，在生产环境中，你需要自行解决跨域问题。希望这个回答能够解决你的疑惑。

当我们在Vue项目中使用代理时，通常是为了解决跨域问题。在开发环境中，我们使用代理来将我们的请求发送到另一个同源的URL上，以避免浏览器的跨域限制。

然而，虽然代理将请求发送到另一个URL上，但它仍然使用的是原来的端口。这是因为代理只是将请求转发到其他URL上，并没有改变请求所使用的端口。

下面是解释为什么Vue代理后仍然使用原来端口的几个原因：

1. 代理是通过webpack-dev-server来设置的，而webpack-dev-server使用的是同一端口。当我们在Vue项目中设置代理时，实际上是将我们的请求发送到webpack-dev-server上，然后由webpack-dev-server将请求转发到代理的URL上。因此，端口实际上是由webpack-dev-server来决定的，而不是代理的URL决定的。

2. 代理只是改变了我们请求的目标URL，而没有改变请求本身。例如，如果我们的项目运行在本地的3000端口，而我们的代理目标是api.example.com:8080，那么在浏览器中发送的实际请求仍然是使用的3000端口。

3. 代理只在开发环境下起作用，而在生产环境下是没有代理的。当我们将我们的Vue项目打包部署到生产环境时，代理配置将不起作用，所有的请求将直接发送到相应的URL上，而不经过代理。

4. 代理只是一种开发调试工具，用于方便我们在开发环境下调试和测试。它并不是用来改变实际的请求和响应的方式，而只是起到一个中间人的作用，将请求转发到另一个URL上。

5. 最后，代理只负责转发请求，并不会改变响应的内容。响应的内容是由代理目标URL响应返回的，与代理本身无关。因此，无论我们使用哪个端口发送请求，响应的内容都是一样的。

总之，在Vue项目中使用代理时，我们只是将请求发送到另一个URL上，但实际的请求端口仍然是由webpack-dev-server决定的，代理只是起到了一个转发的作用。这样做是为了方便开发调试和解决跨域问题，但在生产环境中是没有代理的。

当使用vue-cli创建一个Vue项目时，可以选择使用Vue的开发服务器进行开发，这个开发服务器是一个基于webpack-dev-server的本地开发服务器。

开发服务器会在本地启动一个服务，通过指定的端口号来监听客户端的请求。默认情况下，开发服务器会将请求发送到服务器的端口3000。然而，有些情况下，我们可能需要将请求代理到不同的服务器或端口上，比如将API请求代理到后端服务器上。

Vue CLI提供了一个配置文件vue.config.js，我们可以在这个文件中配置开发服务器的代理。下面是一个简单的例子：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 要代理的目标服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api' // 将请求中的/api替换为空
        }
      }
    }
  }
}

在上面的配置中，我们将以/api开头的请求都代理到了http://localhost:8080这个地址上。接下来我们让Vue CLI重新启动开发服务器，这时候以/api开头的请求就会被代理到http://localhost:8080上了。

这样的代理配置对于开发环境中调试前后端分离项目非常有用，因为我们可以在开发服务器上进行前端的开发，并同时让前端与后端进行通信。

但是需要注意的是，配置完代理后，并不会改变Vue项目的默认端口，只会改变请求的转发。原来的端口仍然会被使用，只是通过代理将请求发送到不同的服务器上。

另外，需要说明的是，代理只在开发环境中生效，当项目打包部署到生产环境时，不再进行代理。