技術標籤：javascriptvue.jshtml5

基於vue ，動態引入資源：自動化引入modulues檔案下面的api

一、首先 將api掛載到vue的原型上

// 將api掛載到vue的原型上
import api from '@/api' 
Vue.prototype.$api=api

二、檔案結構

三、在api/index.js檔案下使用require.context(directory,useSubdirectories,regExp)

1：directory：哪個資料夾

2：useSubdirectories：是否需要找到子資料夾

3：regExp：正則表示式（一般指檔案的字尾）

自動引入api的過程使用如下：

const commonApiObj = {}
//require.context的第三個引數的字尾可以改為vue
let files = require.context('./modules', true, /\.js$/)
files.keys().forEach(key=>{
    let newKey = key.replace(/(\.\/|\.js)/g, '')
    commonApiObj[newKey] = require(`./modules/${newKey}`).default;
})
export default commonApiObj
 

四、呼叫api

//不需要引入，因為自動構建全部掛載在vue原型上,
//logisticsApij是檔名：api/modules/logisticsApi.js
//dataList是logisticsApij下的具體方法
this.$api.logisticsApi.dataList()

總結：這樣的話每次就不需要與引入直接呼叫方便很多api的時候使用，元件也可以使用，路由也可以使用，用途很大，使用方法類似