关于Vue-Cli proxy 不生效的问题

前端开发中经常会遇到调后端接口跨域的问题，解决方法有很多，这里不做介绍了，（有兴趣的可以去这里看看：https://juejin.cn/post/6844904126246027278#heading-44）

今天主要说下Vue-Cli 中的代理，因为看到好多人按照官方文档配置，结果却不生效，为什么会这样呢，无外乎配置的不正确。
先看下官方的文档：

devServer.proxy

• Type: string | Object

  如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

  devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

  module.exports = {
    devServer: {
      proxy: 'http://localhost:4000'
    }
  }
  

  这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

  如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: '<url>',
          ws: true,
          changeOrigin: true
        },
        '/foo': {
          target: '<other_url>'
        }
      }
    }
  }

从文档中看，这种方式是给我们开发环境用的 ，其次是我们的请求要被开发服务器接收到，且不能匹配到请求，然后我们的请求就会被代理到配置的URL。

看懂了文档也就好找出我们配置不生效的原因,其实主要注意一下问题就行了（仅本地开发境适用，测试及生产时最好都部署在统一域名下，或者使用nginx代理）
1.配置好文件要重新启动服务，npm run dev
2.不是用对象形式代理的话比较简单，proxy: 'http://iqoo.want.com',就行了，前提是 .env.development 等环境文件中没有配置API默认路径，如果配置API的URL，就要注释掉，或者改为本地路径，否则代理不会生效，

NODE_ENV=development
VUE_APP_API_URL=development api url
VUE_APP_API_BASE_URL=http://iqoo.want.com/

需要改为
NODE_ENV=development
VUE_APP_API_URL=development api url
VUE_APP_API_BASE_URL=http://localhost:9090/  端口改为自己设定的端口


或者直接注释掉

NODE_ENV=development
VUE_APP_API_URL=development api url
##VUE_APP_API_BASE_URL=http://iqoo.want.com/

3.path: options 成对的对象时，环境注意事项同上，这里主要注意   ‘/api’ ,如果后端接口没有 /api 这个路径，那么你需要在本地默认路径上加上，同时在代理后注销

.env.development
--------------------
NODE_ENV=development
VUE_APP_API_URL=development api url

VUE_APP_API_BASE_URL=http://localhost:9090/api/
或
VUE_APP_API_BASE_URL=/api/


vue.config.js
----------------------
devServer: {
    port: 9090,
    open: true,
    https: false,
    proxy: {
      '/api': {
          target: 'http://iqoo.want.com',
          secure: false,
          pathRewrite: {'^/api' : ''}, //将/api转换成空字符
          changOrigin: true,
       }
    }
 }
   

 也可以将‘’/API‘’换成真是的路径，具体根据项目变换，如果是真是的根路径，就不需要替换成空了
 

VUE_APP_API_BASE_URL=http://localhost:9090/Service/
或
VUE_APP_API_BASE_URL=/Service/



devServer: {
    port: 9090,
    open: true,
    https: false,
    proxy: {
      '/Service': {
        target: 'http://iqoo.want.com',
        secure: false,
        changOrigin: true,
      }
    }
  }

环境和配置都没问题的话基本都会生效的（我没遇到的问题除外.......）