vue封装axios、webpack配置

最新推荐文章于 2023-09-05 23:25:58 发布

BUSTER丨

最新推荐文章于 2023-09-05 23:25:58 发布

阅读量414

点赞数 4

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_39734629/article/details/112799976

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

axios封装

文件创建位置依个人喜好，我将axios的封装写在了public文件夹中 - fetch.js
在这里插入图片描述

文件代码！

import axios from "axios";
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.put["Content-Type"] = "application/json";
// baseurl 就是 在 .env.development 和 .env.development.local 中 预设的域名
console.log("baseUrl:", process.env.VUE_APP_URL); // => 'https://api.apiopen.top/'
let baseurl =
  process.env.VUE_APP_TITLE === "local" // 通过判断 当前的环境变量 得知 项目 运行在 本地 或者 线上
    ? process.env.VUE_APP_PROXY // 本地 使用代理 => '/dev' 此处在 vue.config.js 中代理请求处有配置
    : process.env.VUE_APP_URL; // 线上 使用域名 => 'https://api.apiopen.top/'
axios.defaults.baseURL = baseurl; // 将 baseurl 设置为 axios 的默认 baseURL
/**
 * 下面 是 axios 封装的 请求
 * 采用 es6 promise 和 async await 方式
 */
export default async (url = "", data = {}, type = "POST") => {
  type = type.toUpperCase();
  /**
   * get 请求
   */
  if (type == "GET") {
    //请求参数 拼接字符串
	/**为了实现restful风格，在get请求后，拼接id
	*参数 {id:"id",param:{其他参数}}
	*/
    data.id ? (url = url + "/" + data.id) : (url = url);
    if (data.param) {
      let dataStr = [];
      Object.keys(data.param).forEach((key) => {
        dataStr.push(key + "=" + data.param[key]);
      });
      if (dataStr.length) {
        dataStr = dataStr.join("&");
        url += "?" + dataStr;
      }
    }

    return new Promise((resolve, reject) => {
      axios
        .get(url)
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  }
  /**
   * post 请求
   */
  if (type == "POST") {
    return new Promise((resolve, reject) => {
      data = JSON.stringify(data);
      axios
        .post(url, data)
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  }
  if (type == "PUT") {
    data.id ? (url = url + "/" + data.id) : (url = url);
    return new Promise((resolve, reject) => {
      data = JSON.stringify(data.data || data);
      axios
        .put(url, data)
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  }
  if (type == "DELETE") {
    data.id ? (url = url + "/" + data.id) : (url = url);
    return new Promise((resolve, reject) => {
      data = JSON.stringify(data.data);
      axios
        .delete(url, data)
        .then((res) => {
          console.log(res);
          resolve(res);
        })
        .catch((err) => {
          console.log(err);
          reject(err);
        });
    });
  }
};

拦截器

请求和相应拦截器在main.js中配置

请求拦截器

axios.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    loading = Vue.prototype.$loading({
      lock: true,
      text: "客官请稍后....",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });

    //!    验证是否登录

    if (sessionStorage.getItem("Authorization") === null) {
      router.replace({
        path: "/",
      });
    }

    if (sessionStorage["Authorization"] === undefined)
      router.replace({
        path: "/",
      });
    else
      config.headers.common["Authorization"] = sessionStorage["Authorization"];

    return config;
  },
  function(error) {
    loading.close();
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

响应拦截器

axios.interceptors.response.use(
  function(response) {
    if ("Authorization" in response.headers)
      sessionStorage["Authorization"] = response.headers.Authorization;

    if (response.data.errorCode === 401) {
      Vue.prototype.$message.error(response.data.message);
      router.replace({
        path: "/login",
      });
    }

    if (sessionStorage.getItem("Authorization") === null) {
      router.replace({
        path: "/login",
      });
    }

    loading.close();

    return response;
  },
  function(error) {
    loading.close();
    if (error.response.status >= 500) {
      Vue.prototype.$message.error("服务异常,稍后重试 !");
    } else if (error.response.status === 401) {
      router.replace({
        path: "/login",
      });
      Vue.prototype.$message.error("登录超时,请重新登录!");
    }
    return Promise.reject(error);
  }
);

将所有接口API统一管理

在这里插入图片描述

引入封装好的axios

// 引入 封装请求
import fetch from "../public/fetch.js";

接口export示例

export const getData = (data) => fetch("getData", data, "get");

接口调用示例

async getOilMark(){
	const res = await getData({id:1,param:{test:123}});
}

vue.config.js

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
console.log("接口地址:", process.env.VUE_APP_URL)

const CompressionPlugin = require("compression-webpack-plugin"); //Gzip
module.exports = {
  // 基本路径
  publicPath: "./",

  // 输出文件目录
  outputDir: "dist",

  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: "static",

  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,

  // 如果机器有超过1个内核，则在默认情况下为生产构建中的babel&ts使用线程加载器
  parallel: require("os").cpus().length > 1,

  // 生产环境是否生成 sourceMap 文件，一般情况不建议打开
  productionSourceMap: false,

  // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},

  // webpack配置 see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    // 别名配置 可进行 链式操作
    config.resolve.alias
      .set("@", resolve("src"))
      .set("views", resolve("src/views"))
      .set("$img", resolve("src/assets"));
  },

  //调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
  configureWebpack: config => {
    // 入口文件
    config.entry = "./src/main.js";
    // 生产 & 测试环境
    let pluginsPro = [
      new CompressionPlugin({
        //文件开启Gzip，也可以通过服务端(如：nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"),
        threshold: 8192,
        minRatio: 0.8
      })
    ];
    // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
    if (process.env.NODE_ENV !== "development") {
      config.plugins = [...config.plugins, ...pluginsPro];
    }
    // 打包上线 清除 所有 console
    if (process.env.NODE_ENV === "production") {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
    }
  },

  // 入口文件 可 单独进行配置 写法如下
  // configureWebpack: {
  //   entry: './src/view/index/main.js',
  // },

  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },

  // webpack-dev-server 相关配置
  devServer: {
    open: true, // 是否 自动打开浏览器 在项目启动的时候
    host: "",
    port: 8080, // 端口
    https: false,
    hotOnly: false,

    // 设置代理
    // 这里设置了两个代理请求 为了匹配 不同环境的, 根据实际情况配置代理
    // 比如 公司有 开发 连调 测试 演示 生产等环境, 除了生产环境以外其他环境都需要配置 代理请求
    // 当启动 vue 项目的 时候 运行在 localhost:8080 上,假设公司的 开发环境 为 http://development.com 当发送请求时 就会发生跨域, 所以 采用代理方式 进行 同域,
    // 当 项目上线 后 根据 环境变量 使用不同 的域名 就不会有跨域情况
    // 读到这里 如果 还有 不理解 请往下进行
    proxy: {
      "/dev": {
        target: process.env.VUE_APP_URL, // 代理请求的地址 => https://api.apiopen.top/
        changeOrigin: true,
        pathRewrite: {
          "^/dev": ""
        }
      },
      "/api": {
        target: process.env.VUE_APP_URL,
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  },
  // 第三方插件配置
  pluginOptions: {}
};

不同环境的配置文件格式

在这里插入图片描述

NODE_ENV=development
VUE_APP_TITLE=local
VUE_APP_URL=localhost:8080/
VUE_APP_PROXY=/api

BUSTER丨

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
vue封装axios、webpack配置

axios封装文件创建位置依个人喜好，我将axios的封装写在了public文件夹中 - fetch.js文件代码！import axios from "axios";axios.defaults.headers.post["Content-Type"] = "application/json";axios.defaults.headers.put["Content-Type"] = "application/json";// baseurl 就是在 .env.development 和 .
复制链接

扫一扫