Vue 代理设置 在打包后是不是不生效了

Question

本地开发测试好好的。但打包后放到服务器后。服务器端也有对应的5000端口的服务接收API请求。但是在访问打包后的页面，就是没有看到有收到来自页面过来的API请求。

是不是我使用npm run build 之后，这段关于devServer 的proxy相关的东西，并不会被打包到静态面面中？还是其它原因。

module.exports = {
    publicPath: './',
    assetsDir: 'static',
    productionSourceMap: false,
    devServer: {
        proxy: {
            '/api':{
                target:'http://127.0.0.1:5000',
                changeOrigin:true,
                pathRewrite:{
                    '/api':'api'
                }
            }
        }
    }

}### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

1. 使用 webpack-dev-server (下简称wds) 进行开发时，wds 启动了一个运行在 node 上的 web 服务器，此时开发环境访问对应的端口时 (以 8080 举例) ，浏览器返回的 vue 页面是 wds 处理后的结果。
2. 跨域。简单来说，在使用 ajax 请求与当前页面不同来源的数据时，浏览器会拦截服务器发回的响应。在开发环境下，“当前来源”就是 http://127.0.0.1:8080，向任何其它地址或端口的请求都会被视作跨域，从而被浏览器拦截。

3.devServer 的 proxy 是为了简化开发环境下的跨域请求配置。在上述情景中，注意被拦截的是发往“其它来源”的请求，而发往“当前来源”的不会被拦截，此处的“当前来源”则是作为开发服务器的 wds。wds 的思路就是基于此的，当发现符合在 devServer proxy 中配置好的请求格式时，将该请求拦截下来，由自己去请求服务器获取响应，然后把该响应返回给前端页面，即相当于一个传话筒。

1. 编译打包后，前端页面成为了单独的静态资源，wds 被抽离出去了。但是资源要被访问，那必然还是需要有另一个 web 服务器来装载它，这个服务器常见的就是 nginx。所以，如果想要让线上的 vue 页面也能正常访问服务器，那么只需要配置 nginx，告诉它同样的事，即“当我访问某个 url 时，由你来做实际的请求，然后把结果告诉我”。

Answer 2

是的 devServer 只是一个webpack插件 只能用于开发环境

正式的生产环境建议使用nginx做转发，好像都是这么干的。

Answer 3

devServer 是npm run dev时生效的，用于开发环境
打包时用的是生产环境，不会用devServer的配置