vue项目在开发环境和生产环境接口地址配置简记

最新推荐文章于 2024-09-05 17:12:12 发布

小小蜗牛学习记

最新推荐文章于 2024-09-05 17:12:12 发布

阅读量5.8k

点赞数

分类专栏： vue 学习笔记

本文链接：https://blog.csdn.net/qq_28458369/article/details/89513215

版权

本文简要介绍了在Vue开发环境和生产环境中如何配置接口地址。在开发环境中，利用proxyTable进行代理，将'/api'重定向，而在生产环境中，通过设置常量拼接项目名称来确保正确调用接口。

摘要由CSDN通过智能技术生成

开发环境

在开发环境中，由于前后台并不是放在同一个服务器中的，所以这个时候就需要配置代理，打开vue项目的config/index.js文件，找到dev对象里的proxyTable配置如下：

 dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 配置后台通信
    proxyTable: {
      '/api': {
        // 本地
        target: 'http://localhost:8089/yunhai/api',
        // target: 'http://127.0.0.1:8089',
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/api': ''   //需要rewrite的,
        }
      }
    },
    ...... // 后面的属性这里省略
}

target是你要连接的服务器（可以是域名也可以是ip地址），pathRewrite是重定向。怎么理解呢？

比如我的项目名是yunhai，我有一个登录接口是api/account/login