iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >vue多环境配置及axios封装使用的方法
  • 582
分享到

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

2024-04-02 19:04:59 582人浏览 独家记忆
摘要

今天小编给大家分享一下Vue多环境配置及axiOS封装使用的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我

今天小编给大家分享一下Vue多环境配置及axiOS封装使用的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

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 :

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',

  '/table/list': mockBaseUrl + '/223948/table-list'

}

3.写获取地址的工具方法

在utils目录下创建get-url.js

import config from '@/config' 

import urlMap from '@/config/urlMap'

export default function getUrl(url,api=1,domainType=1){

    //api: 0  mock服务  1接口服务

    //domainType:  1取apiDomain,可自定义其他域名

    let domain = ''

    if(domainType == 1){

        domain = config.apiDomain

    }

    return api===0 ? urlMap[url] : domain+url

}

4.在js中导入getUrl方法,并使用

import request from '@/assets/js/utils/request'

import getUrl from '@/assets/js/utils/get-url'

export function getAccountList(data){

    return request({

        url: getUrl('/person/getPAList'),

        method: 'post',

        data

    })

}

5.request是封装axios实例

在utils下的request中

import axios from 'axios'

import {  MessageBox } from 'element-ui'

//创建axios实例

const service = axios.create({

    timeout:5000

})

//request拦截器.可以后续完善

service.interceptors.request.use(config=>{

    //do something before request is send

    //if(store.getters.token){

    //    config.headers['token'] = getToken()

   // }

    return config

},error=>{

    //do something with request error

    console.log(error);

    Promise.reject(error)

})

//response拦截器,

service.interceptors.response.use(

    response => {

    const res = response.data

    if(res.code !='0'){

       // if(res.code ==='4001' || res.code==='4002'){

       //     MessageBox.confirm();

       // }

       //自己加一些处理

    }else{

        return res.content;

    }

    }

)

export default service;

6.调用方法

由于上面例子中getAccountList方法返回的是axios实例(也就是返回了Promise对象),所以调用如下,可以使用.then 或者.catch 执行

  created:function(){

       getAccountList(this.personAccountDTO).then(result=>{

          this.account = result;

      })

  },

7.添加启动项目

在package.JSON 加上带环境配置的启动脚本dev 和prd

{

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint",

    "dev": "vue-cli-service serve --mode dev",   

    "prd": "vue-cli-service serve --mode prd"

  },

  ........

8.启动项目

npm run dev   #.env.dev文件中配置生效

以上就是“vue多环境配置及axios封装使用的方法”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网html频道。

--结束END--

本文标题: vue多环境配置及axios封装使用的方法

本文链接: https://www.lsjlt.com/news/89393.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue多环境配置及axios封装使用的方法
    今天小编给大家分享一下vue多环境配置及axios封装使用的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我...
    99+
    2024-04-02
  • vue使用vite配置跨域及环境配置的方法
    这篇文章主要介绍“vue使用vite配置跨域及环境配置的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue使用vite配置跨域及环境配置的方法”文章能帮助大家解决问题。如何配置跨域,代理域名不...
    99+
    2023-07-02
  • vue封装axios的几种方法
    目录基础版第一步:配置axios 第二步:封装请求 第三步:使用 进阶版基础版 第一步:配置axios 首先,创建一个Service.js,这里面存放的时axios的配置以及拦截器...
    99+
    2024-04-02
  • vue项目多环境配置得方法
    这篇文章主要介绍“vue项目多环境配置得方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue项目多环境配置得方法”文章能帮助大家解决问题。什么是多环境配置,为什...
    99+
    2024-04-02
  • Vue项目中封装axios的方法
    目录一、axios是什么特性基本使用二、为什么要封装三、如何封装设置接口请求前缀设置请求头与超时时间封装请求方法请求拦截器响应拦截器小结参考文献一、axios是什么 axios 是...
    99+
    2024-04-02
  • vue项目多环境配置的实现方法
    这篇文章主要讲解了“vue项目多环境配置的实现方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue项目多环境配置的实现方法”吧!目录什么是多环境配置,为什么要多环境配置.env 文件配置...
    99+
    2023-06-20
  • Linux安装nodejs环境及路径配置的方法
    本篇内容介绍了“Linux安装nodejs环境及路径配置的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!linux安装nodejs有2种...
    99+
    2023-06-21
  • nodejs安装及环境配置的方法是什么
    要安装并配置Node.js环境,可以按照以下步骤进行:1. 下载Node.js安装包:在Node.js官方网站 (https://n...
    99+
    2023-08-24
    nodejs
  • tomcat配置环境及安装的方法是什么
    Tomcat是一种常用的Java Servlet容器,可以运行Java Web应用程序。下面是Tomcat的配置环境及安装方法:1....
    99+
    2023-06-13
    tomcat配置 tomcat
  • Centos安装Python虚拟环境及配置方法
    virtualenv 可以在系统中建立多个不同并且相互不干扰的虚拟环境。 python3的虚拟环境工具配置 1.下载虚拟环境工具 [root@localhost opt]#pip...
    99+
    2024-04-02
  • vue多环境配置之.env配置文件怎么使用
    这篇文章主要介绍“vue多环境配置之.env配置文件怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue多环境配置之.env配置文件怎么使用”文章能帮助大家解决问题。Vue之.env环境配置...
    99+
    2023-07-05
  • vue3和ts封装axios及使用mock.js的方法是什么
    这篇文章主要讲解了“vue3和ts封装axios及使用mock.js的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3和ts封装axios及使用mock.js的方法是什么”吧...
    99+
    2023-07-05
  • vue使用vite配置跨域以及环境配置详解
    目录如何配置跨域,代理域名区分开发环境和生产环境,以及预发布环境可以做什么事补充:解决跨域常用方法一、VUE中常用proxy来解决跨域问题二、JSONP解决跨域 三、COR...
    99+
    2024-04-02
  • vue封装axios请求的方法是什么
    本文小编为大家详细介绍“vue封装axios请求的方法是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue封装axios请求的方法是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。其实vue封装axio...
    99+
    2023-07-04
  • Axios代理配置及封装响应拦截处理方式
    目录Axios代理配置及响应拦截处理代理配置响应内容拦截处理Axios的proxy代理配置解析Axios代理配置及响应拦截处理 Axios是vue官方推荐的异步处理方案,所以在几个v...
    99+
    2024-04-02
  • Vue3使用axios的配置方法
    本篇内容主要讲解“Vue3使用axios的配置方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3使用axios的配置方法”吧!一、安装axiosnpm install ...
    99+
    2023-06-30
  • vue中vite.config.js配置跨域以及环境配置方式
    目录如何配置跨域,代理域名,下面是vite的代理区分开发环境和生产环境,以及预发布环境VUE中常用proxy来解决跨域问题总结如何配置跨域,代理域名,下面是vite的代理 serve...
    99+
    2023-05-16
    vue中vite.config.js vite.config.js配置跨域 vue环境配置
  • SpringBoot中的Profile多环境配置方法
    目录Profile多环境配置一、使用profile文件进行多环境配置二、使用@Profile注解进行多环境配置Profile多环境配置       在实...
    99+
    2023-01-28
    SpringBoot Profile多环境配置 SpringBoot Profile配置 SpringBoot 多环境配置
  • Springboot多环境开发及使用方法
    目录概述多环境设置使用多环境分组管理Maven和spring-boot的配置冲突概述 Springboot在不同的阶段运行,所使用的环境可能不一样比如在开发阶段、测试阶段、生产阶段,...
    99+
    2024-04-02
  • ecs安装配置php环境的方法
    这篇文章主要介绍了ecs安装配置php环境的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。配置方法:1、使用Xshell连接ECS服务器;2、执行“yum install...
    99+
    2023-06-14
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作