快捷導(dǎo)航

vue?require.context()的用法實例詳解

更新時間：2023年04月06日 10:01:59 作者：白嫖leader

require.context是webpack提供的一個api,通常用于批量注冊組件,下面這篇文章主要給大家介紹了關(guān)于vue?require.context()用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

require.context()的介紹
用法一：在組件內(nèi)引入多個組件
用法二：在main.js中引入大量公共組件
用法三：使用插件注冊全局組件
用法四：引入vuex的module
用法五：引入項目中所有的svg文件
用法六：利用require.context遍歷目錄所有的圖片
總結(jié)

require.context()的介紹

我們可以在控制臺中打印require，可見require其實就是就是一個函數(shù)

我們可以打印require.prototype，查看他身上都有什么方法，都要傳入哪些參數(shù)

console.log(require.prototype);

require.context參數(shù)介紹
require.context(directory,useSubdirectories,regExp)

directory:表示檢索的目錄
useSubdirectories：表示是否檢索子文件夾
regExp:匹配文件的正則表達(dá)式,一般是文件名

例如 require.context(“@/views/components”,false,/.vue$/)

用法一：在組件內(nèi)引入多個組件

核心代碼如下

const path = require("path")
const files = require.context("@/views/00-99/requireContext/components", false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
  const name = path.basename(key, ".vue")
  modules[name] = files(key).default || files(key)
})
console.log(modules)
export default {
  components: modules,
}

案例如下：

代碼目錄結(jié)如下（這個看起來可能比較亂，先將就一下吧）：

有兩個將會被用到的組件：

我們主要關(guān)注requireContext文件夾里面的內(nèi)容即可

比如說現(xiàn)在有十好幾個組件在components文件夾里，這些組件將要被引入02.vue中進(jìn)行使用，我們不想使用import一個一個的進(jìn)行引入，那么這個時候就可以使用require.context了，

代碼如下：

index.js（這里指的是requireContext目錄下的index.js）

const path = require("path")
const files = require.context("@/views/00-99/requireContext/components", false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
  const name = path.basename(key, ".vue")
  modules[name] = files(key).default || files(key)
})
console.log(modules)
export default {
  components: modules,
}

02.vue

<template>
  <div>
    <COMA />
    <COMB />
  </div>
</template>

<script>
import mycomponents from "./index"
console.log(mycomponents)
export default {
  components: {
    COMA: mycomponents.components.zujianA,
    COMB: mycomponents.components.zujianB,
  },
}
</script>

<style></style>

最終的效果如下;

用法二：在main.js中引入大量公共組件

下面的代碼都是在main.js，也就是項目的入口文件中寫的，在這個地方將組件進(jìn)行一次性的全局注冊，這么多的代碼寫在main.js中可能顯得比較累贅，我們也可以使用方法三（Vue插件），使得代碼看起來比較簡介一些。

import Vue from 'vue'
// 自定義組件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印結(jié)果
// 遍歷出每個組件的路徑
requireComponents.keys().forEach(fileName => {
  // 組件實例
  const reqCom = requireComponents(fileName)
  // 截取路徑作為組件名
  const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
  // 組件掛載
  Vue.component(reqComName, reqCom.default || reqCom)
})

用法三：使用插件注冊全局組件

我們可以新建一個js文件，使用插件的方式進(jìn)行一次性的全局注冊

 /*
   所有在./components目錄下的.vue組件自動注冊為全局組件
   以<mc-***></mc-***>為組件標(biāo)簽名，***是組件的.name
*/
const requireContext = require.context('../components', true, /\.vue$/)
const requireAll = context => context.keys().map(context)

console.log(requireContext)
console.log(requireAll(requireContext))
export default (Vue) => {
  requireAll(requireContext).forEach(item => {
    Vue.component(`vc-${item.default.name}`, item.default)
  })
}

用法四：引入vuex的module

app.js與user.js是兩個模塊，將來都需要被引入到index.js中進(jìn)行使用

index.js代碼(modules目錄下的)

import Vue from "vue"
import Vuex from "vuex"
// 省去了一大堆的import
// import app from "./modules/app"
// import user from "./modules/user"
import getters from "./getters"
Vue.use(Vuex)

const files = require.context("./modules", false, /\.js$/)
console.log("------------")
console.log(files.keys())
console.log("------------")
const modules = {}

files.keys().forEach((key) => {
  modules[key.replace(/(\.\/|\.js)/g, "")] = files(key).default
})

console.log("------------")
console.log(modules)
console.log("------------")

export default new Vuex.Store({
  // 省去了手動注冊
  // modules: {
  //   app,
  //   user,
  // },
  modules: { ...modules },
  getters,
})

用法五：引入項目中所有的svg文件

const requireContext = require.context('./svg', false, /\.svg/)
const requireAll = context => context.keys().map(context)
requireAll(requireContext)

用法六：利用require.context遍歷目錄所有的圖片

<template>
  <div id="app">
    <li v-for="(img, index) in images" :key="index">
      <p>img: {{ img }}</p>
      <img :src="imgUrl(img)" alt="" />
    </li>
  </div>
</template>

<script>
const req = require.context("@/assets/images", false, /(\.jpg|\.gif)$/)

export default {
  name: "App",
  data() {
    return {
      images: [],
    }
  },
  created() {
    this.images = req.keys()
  },
  methods: {
    imgUrl(path) {
      return req(path)
    },
  },
}
</script>

<style>
img {
  height: 30px;
}
</style>