【前端】配置接口路径

登陆木星

已于 2023-03-19 22:31:19 修改

阅读量373

点赞数

分类专栏：前端项目文章标签： vue.js javascript 前端

于 2023-03-18 00:44:08 首次发布

本文链接：https://blog.csdn.net/weixin_51508961/article/details/129574873

版权

前端项目专栏收录该内容

14 篇文章

订阅专栏

该文章讲述了如何在Vue项目中根据开发环境(.env.development)和生产环境(.env.production)设置不同的接口基础路径，并在vue.config.js中使用代理解决跨域问题。通过axios创建服务实例，动态获取VUE_APP_BASE_API来请求数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考博客
vue根据不同的环境配置接口路径，带不同版本号的接口路径配置

.env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://localhost:98'

.env.production

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = ''

vue.config.js

跨域要求当前台和后台不在同一个目录。
利用vue.config.js的代理去指定环境process.env.VUE_APP_BASE_API。

  devServer: {
    https: false,
    hot: false,
    proxy: {
      "/api": {
        target: "http://localhost:98",
        changeOrigin: true, //是否跨域
        pathRewrite: {
          "^/api": "",
        }
      },
    },
  },

request.js

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: requestTimeOut,
  responseType: 'json',
  validateStatus(status) {
    return status === success
  }
});