vue中配置axios教程-定稿版（一）——api index.js配置文件和.env文件

vue中配置axios教程-定稿版（一）——api/index.js配置文件和.env文件

第一步:在api/index.js中，

配置请求拦截、响应拦截、请求头和基准路径

完整代码-src/api/index.js

import axios from 'axios' // 接口错误情况处理 const errorHandler = err => { 
    console.log(err, 'err') return Promise.reject(err) } const service = axios.create({ 
    // process.env.NODE_ENV === 'development' 来判断是否开发环境 // easy-mock服务挂了，暂时不使用了 withCredentials: true, // cookie // baseURL: 'http://192.168.43.82:8090/',  baseURL: process.env.VUE_APP_BASE_API // timeout:  }) service.interceptors.request.use( config => { 
    if (sessionStorage.getItem('token')) { 
    config.headers.token = sessionStorage.getItem('token') } if (config.data && config.data.post) { 
    if (config.method === 'post') { 
    config.data.post = null config.params = config.data } } return config }, error => { 
    console.log(error) // return Promise.reject() } ) service.interceptors.response.use(response => { 
    // application/octet-stream // 只将请求结果的data字段返回(JSON格式处理) let resData // if (response.data.status / 1 === 500 || response.data.status / 1 === 505) { 
    // sessionStorage.removeItem('token') // if (window.location.pathname !== '/login') window.location.href = '/login' // } if (typeof response.data === 'string' && /{/.test(response.data)) { 
    try { 
    resData = JSON.parse(response.data) } catch (e) { 
    resData = response.data } } else { 
    resData = response.data } return resData }, errorHandler) export default service 

1、基准路径配置的两种方式

方式一

baseURL: 'http://192.168.43.82:8090/', 

方式二

1、在项目文件夹，src同层级新建.env文件

完整代码-.env

baseURL: process.env.VUE_APP_BASE_API 

2、在src/api/index.js中

 // baseURL: 'http://192.168.43.82:8090/',  baseURL: process.env.VUE_APP_BASE_API 

2、vue 中使用.env文件配置全局环境变量

.env 全局默认配置文件
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
使用在文件根目录下创建该文件。
其中，.env.development 与.env.production会覆盖.env 的全局属性。
.env.development 为npm run serve 即开发环境中加载。
.env.production 为npm run build 即生产环境中加载。

1、全局属性 自定义命名

VUE_APP_NAME = '' VUE_APP_是规定的命名格式，NAME则是自定义的名称 

2、获取全局属性

process.env.VUE_APP_NAME 获取环境变量 NAME是自定义的名称 

3、例子

.env.development

ENV = development # url VUE_APP_URL = http://192.168.43.82:8090 

.env.production

ENV = production # burl VUE_APP_URL = http://192.168.1.109:8000 

4、调用

main.js中使用例子

//定义全局$baseUrl // 使用 this.$baseUrl Vue.prototype.$baseUrl = process.env.VUE_APP_URL; 

vue.config.js 中使用例子

 devServer: { 
    port: 8088, proxy: { 
    //匹配代理的url '/api': { 
    // 目标服务器地址 target: process.env.VUE_APP_URL, ws: true, //路径重写 pathRewrite: { 
    '^/api': '' }, changeOrigin: true } } }, 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10881.html