Vue2 组件越写越乱？二次封装救大命！从重复搬砖到效率起飞

还在 Vue2 项目里重复写弹窗、表格逻辑？每次改需求都要 “复制 - 粘贴 - 改细节”？这篇Vue2 二次封装实战，聚焦组件复用、业务定制、降本提效，用「基础组件增强、逻辑复用封装、复杂功能简化」3 大场景 + 代码示例，教你把重复劳动变成 “拿来即用” 的工具库，让组件开发速度翻倍，项目维护成本大降，告别搬砖式开发！

一、在Vue根目录下创建三个.env文件

1.开发环境文件名（.env.development）

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'https://testshool.zzgoodqc.cn/'//接口前缀

2.测试环境（.env.test）

NODE_ENV = 'test'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'https://testshool.zzgoodqc.cn/'//接口前缀
outputDir = test

3.正式环境（.env.production）

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'https://testshool.zzgoodqc.cn/'//接口前缀

二、在创建好的Vue文件中的src目录下创建utils文件夹

在utils中创建axios.js

import axios from 'axios';

// 设置请求超时时间，单位为毫秒
axios.defaults.timeout = 30000;

// 根据环境变量设置请求的基础URL
if (process.env.VUE_APP_API_URL) {
    axios.defaults.baseURL = process.env.VUE_APP_API_URL;
} else {
    console.error('API URL未定义，请检查环境变量');
}

// 根据环境变量设置请求头
if (process.env.VUE_APP_API_TOKEN) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${process.env.VUE_APP_API_TOKEN}`;
}

// 添加请求拦截器
axios.interceptors.request.use(
    config => {
        // 可以在这里添加一些全局的请求配置，比如token
        if (process.env.VUE_APP_MODE === 'development') {
            console.log('开发环境请求');
        } else if (process.env.VUE_APP_MODE === 'test') {
            console.log('测试环境请求');
        } else {
            console.log('正式环境请求');
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 添加响应拦截器
axios.interceptors.response.use(
    response => {
        // 可以在这里对响应数据进行一些处理
        return response;
    },
    error => {
        if (error.response) {
            // 请求已发出，但服务器响应的状态码不在2xx范围内
            console.error('响应错误:', error.response);
        } else if (error.request) {
            // 请求已发出，但没有收到响应
            console.error('请求错误:', error.request);
        } else {
            // 在设置请求时发生了一些事情，触发了错误
            console.error('未知错误', error.message);
        }
        console.error('错误配置:', error.config);
        return Promise.reject(error);
    }
);

export const request = (options) => {
    return new Promise((resolve, reject) => {
        const config = {
            url: options.url,
            method: options.method || 'GET',
            headers: options.headers || {}, // 确保 headers 能正确合并
            [options.method.toLowerCase() === 'get' ? 'params' : 'data']: options.data || {},
        };
        axios(config)
            .then((res) => {
                resolve(res.data);
            })
            .catch((err) => {
                // 提供更详细的错误信息
                reject({
                    message: err.message,
                    response: err.response
                });
            });
    });
};

三、在utils中继续创建一个api.js文件

import {
	request
} from './axios';//引入一次封装

// 登录接口
export const login = (data) => {
	return request({
        //根据.env文件的前缀在此拼接
		url: 'index.php/index/index/login',
		method: 'post',
		data: data
	});
};