Vue(十二):js模块化引用 - require.context

require.context

// directory: 要查找的文件路径
// useSubdirectories: 是否查找子目录
// regExp: 要匹配文件的正则
require.context(directory, useSubdirectories, regExp)

在Vue项目中的使用

// src/assets/api/index.js
import Vue from "vue";

const getApi = {
    install() {
        Vue.prototype.$api = {}
        const requireComponents = require.context('./modules', false, /\.js/)
        requireComponents.keys().forEach(file => {
            const mod = requireComponents(file);
            const fileName = file.replace(/\.\/|\.js/g, '');
            Vue.prototype.$api[fileName] = mod.default;
        })
        return Vue.prototype.$api
    }
}

export default getApi;

// main.js
import getApi from './assets/api'
Vue.use(getApi);

// src/assets/api/modules/user.js
// src/assets/api/modules/file.js
const api = {
    funA(data){
        return data;
    },
    funB(data){
        return data;
    },
    funC(data){
        return data;
    }
}

export default api;

// 在组件中使用方法
console.log(this.$api); 
// { user: { funA(data){}, funB(data){}, funC(data){} }, file: { funA(data){}, funB(data){}, funC(data){} } }
上一篇:Vue - 加载静态图片的方式


下一篇:服务端概念