vue多环境配置及axios封装使用

最新推荐文章于 2024-05-10 17:15:26 发布

冰镇麻辣烫

最新推荐文章于 2024-05-10 17:15:26 发布

阅读量628

点赞数 1

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

本文链接：https://blog.csdn.net/m0_58089176/article/details/122093440

版权

1.创建配置文件

在项目根目录下创建 .env.环境名称例如：.env.prd .env.dev

在配置文件中配置不同环境的api路径

# env
NODE_ENV = 'development'

# flag
VUE_APP_FLAG = 'dev' 

# domain url 接口域名、静态资源地址
VUE_APP_APIDOMAIN = 'http://localhost:8081'
VUE_APP_ASSETSURL = ''

2.在config目录

index.js : 导出当前环境配置中的地址

let envInfo = process.env    //process.env 获取当前启动的环境配置
let [apiDomain,assetsUrl] = [envInfo.VUE_APP_APIDOMAIN,envInfo.VUE_APP_ASSETSURL]  //获取配置中的值

export default {
   
    apiDomain,
    assetsUrl
}

urlMap.js ：

/**
 * @desc 远程接口地址和本地mock地址映射表
 * key：接口地址
 * value：本地地址
 */
const mockBaseUrl = 'http://rap2api.taobao.org/app/mock'
export default {
   
  '/user/login': mockBaseUrl + '/223948/login',
  '/user/info': mockBaseUrl + '/223948/info',
  '/user/logout': mockBaseUrl + '/223948/logout',