最近配置了一台新设备，搭建开发环境时发现 vue-cli3 的升级带来的变化还是蛮大的，有了图形化配置界面，体量也轻了很多。对开发者更友好，但是该配置的还是要配置的哈，这篇记录一下折腾了蛮久的代理配置。

✨ devServer.proxy 官方文档

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

“有些针对 @vue/cli 的全局配置，例如你惯用的包管理器和你本地保存的 preset，都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。你也可以使用 vue config 命令来审查或修改全局的 CLI 配置。”

我们拿豆瓣的接口举个栗子：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.demo.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/douban': {
        target: 'https://api.douban.com/v2/movie/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/douban': ''
        }
      }
    }
  }
}

如此以来，我们在调用的时候就可以这么写了：

axios.get('/douban/top250').then(res => {
  console.log(res)
})

相当于我们请求了 https://api.douban.com/v2/movie/top250

doen~