IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue多环境配置及axios封装使用 -> 正文阅读

[JavaScript知识库]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 :

/**
 * @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',
  '/table/list': mockBaseUrl + '/223948/table-list'
}

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

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

import config from '@/config' 
import urlMap from '@/config/urlMap'

/**
 * @desc 远程接口地址和本地mock地址映射表
 * key:接口地址
 * value:本地地址
 */
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文件中配置生效
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-23 15:40:27  更:2021-12-23 15:42:30 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 10:50:23-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码