使用vue/cli-service构建devserve和proxy代理

在使用 Vue CLI 构建开发环境时，可以通过 `vue.config.js` 配置文件来配置 `devServer` 和 `proxy`，实现本地开发服务器和代理请求的配置。

1. devServer

`devServer` 是用于配置开发服务器的选项。在 `vue.config.js` 文件中，可以添加以下配置：

module.exports = {
  devServer: {
    port: 8080, // 端口号
    open: true, // 自动打开浏览器
    compress: true, // 是否启用 gzip 压缩
    hot: true, // 热更新
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

其中，`port` 表示本地服务器的端口号，`open` 表示是否自动打开浏览器，`compress` 表示是否启用 gzip 压缩，`hot` 表示是否启用热更新。

另外，`proxy` 选项用于配置代理。上面的配置表示，所有以 `/api` 开头的请求都会被代理到 `http://localhost:3000` 上，`changeOrigin` 表示是否改变请求头中的 Origin 字段，`pathRewrite` 表示是否重写请求路径。

2. proxy

如果需要对特定的请求进行代理，可以在 `vue.config.js` 文件中配置如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/foo': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/foo': ''
        }
      }
    }
  }
}

上面的配置表示，所有以 `/api` 开头的请求都会被代理到 `http://localhost:3000` 上，而所有以 `/foo` 开头的请求则会被代理到本地服务器上。

总的来说，通过 `vue.config.js` 文件的配置，可以方便地配置本地开发服务器和代理请求，提高开发效率。