vue.config.js中配置前端代理

注意开发环境的本地代理或者测试环境的代理,在部署到正式上时,一定要换成线上的IP地址,不然,数据拿不到。

首先在项目中 新建

vue.config.js (cli配置文件)
.env.development (配置开发和测试接口地址)
.env.production (配置生产环境接口地址)

配置测试和本地开发时的 接口地址

在.env.production(将下边的内容放进去)
VUE_APP_URL = "你的开发或测试接口地址"

配置 正式接口地址

.env.development(将下边的内容放进去)
VUE_APP_URL = "你的正式接口地址"

vue.config.js中的 devServer 属性下进行配置

devServer: {
    // before mock
    // before: beforeHooks,
    port: port,
    // open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    hot: true,
    clientLogLevel: 'warning',
    proxy: {
      '/api': {
        target: process.env.VUE_APP_URL,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//这个意思就是以api开头的,定向到哪里, 如果你的后边还有路径的话, 会自动拼接上
        }
      }
    }
    // mock数据的 middleware
    // after: require('./mock/mock-server.js')
  },

·

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容