vue开发中api接口地址区分开发环境和线上环境

最新推荐文章于 2025-06-20 09:24:45 发布

唐宋元明清.

最新推荐文章于 2025-06-20 09:24:45 发布

阅读量1.3w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue axios

本文链接：https://blog.csdn.net/qq_22844483/article/details/81662670

VUE 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了在Vue项目中如何根据开发环境和线上环境配置不同的API接口地址，重点讲解了dev.env.js和prod.env.js文件的修改，以及如何使用webpack的代理解决跨域问题。通过设置proxyTable和封装axios请求，确保开发和上线环境的API调用正确。记得每次修改配置文件后重启项目以使改动生效。

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

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"开发环境地址"'
})

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"线上地址"'
}

注意

本地开发会用到webpack的代理, 开发环境的api地址已经被代理了, 在/config/index.js里面的proxyTable, 所以线下地址不能写成你实际的线下地址, 而是要写成你这里代理后的地址. 关于vue2.x使用axios以及http-proxy-middleware代理处理跨域的问题

代理处理跨域

在/config/index.js里的proxyTable, 现在最新的vue-cli不需要特意安装插件了直接修改这个文件即可

proxyTable: {
    '/apis': {  //将www.exaple.com印射为/apis
      target: 'https://www.exaple.com', // 接口域名
      changeOrigin: true, //是否跨域
      pathRewrite: {
        '^/apis': ''  //需要rewrite的,
      }       
    }
 }

使用

最好是把所有的请求都封装一下, 不管是为了以后修改还是其他什么

在请求之前拼接地址

const root = process.env.API_ROOT;

这个root就是对应的地址

npm run dev

开发环境会使用dev.env.js里的API_ROOT

npm run build

线上环境会使用prod.env.js里的API_ROOT

在每个请求的地方

root+'/getlist'

如果没有封装的话, 则需在每个***.vue文件内

const root = process.env.API_ROOT;

然后使用root+'/getlist'

最后, 配置完要重启项目, 记住, 每次修改完配置文件都要重启项目, 才会看到是否生效

验证

可以在入口vue文件内log一下测试

const root = process.env.API_ROOT;
// 然后在created(){}, 这个函数内打印一下root 如果是你设置的 就说明设置成功

有不明白的地方可以留言