(精华2020年5月12日更新) vue实战篇 axio.js封装和环境配置-CSDN博客

本文链接：https://blog.csdn.net/weixin_41181778/article/details/106087188

本文介绍如何在Vue项目中进行axios的封装，包括在package.json中安装依赖，配置webpack.config.js以使sceneParam变量能在Vue文件中直接使用，以及在main.js中引入并使用封装后的axio.js和api.js文件。

摘要由CSDN通过智能技术生成

首先安装

npm i cross-env

package.jsom

"scripts": {
   
    "test":"cross-env scene=test webpack --config webpack.config.js",
    "dev": "cross-env scene=dev webpack-dev-server --config webpack.config.js",
    "build": "cross-env scene=prod webpack --config webpack.config.js"
  },

再到webpack.config.js配置

// 插件
    plugins: [
           new webpack.DefinePlugin({
   
                'sceneParam': JSON.stringify(process.env.scene),
                'laney':JSON.stringify('laney'),
                'test':'"kkkkk"'
            })
    ]

sceneParam变量就能在vue文件中直接获取

vue中封装axio.js
首先在main.js引入对应的axio封装文件

import Vue from 'vue';

import axios from './providers/axios.js';
import api from './providers/api.js';
Vue.prototype.$axios = axios;
Vue.prototype.$api = api;

axio.js文件

// 使用数据拦截器
import axios from 'axios';
import Qs from 'qs';
import {
   
  Message
} from 'element-ui';
axios.defaults.timeout = 5000;

// env_config
// dev  开发环境
// test  测试环境
// build  线上环境
var urlObj = {
   
  dev: 'http://localhost:8081',
  test: 'http://localhost:8081/',
  build: 'https://www.17npw.net/api/'
}
console.log(urlObj[sceneParam]);
// Message('这是一条消息提示');
axios.defaults.baseURL = urlObj[sceneParam]; //填写域名

//http request 拦截器  客户端给服务端 的数据 
axios.interceptors.request.use(
  config => {
   

    config.headers.common = {
   
      'X-API-TOKEN': localStorage.getItem('token'),
      'version': '1.0',
      'Content-Type': 'application/json;charset=UTF-8'
    }
    console.log('begin');

    if (config.data.form) {
   
      //转化成formData格式