在vue项目中使用代理转发机制实现本地数据测试

一、背景需求

在一个不涉及后端开发的vue项目中，我们需要本地数据对页面进行动态渲染
而对于本地服务器来说，它只能访问static目录下的数据
这意味着我们需要一个机制，帮助我们将 对api目录的请求 转发到static目录下

二、实现方式

旧版本
在3.x版本的vue-cli中，webpack-dev-server 为我们提供了这种转发功能
打开config目录下的 index.js 文件

image.png

在dev部分，找到 proxyTable
在内部添加所需的转发路径即可

新版本
在4.x版本的vue-cli中，我们需要在根目录下创建 vue.config.js 文件
在文件中通过devServer来实现代理转发

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080/',
                pathRewrite: {
                    '^/api': '/mock'
                }
            }
        }
      }
}

更详细的使用方法请参考 vue-cli的官方配置文档