vue中的require使用

更新時間：2023年08月05日 10:47:58 作者：程序員的脫發(fā)之路

require是node中的一個方法,他的作用是用于引入模塊、 JSON、或本地靜態(tài)文件,這篇文章主要介紹了vue中的require使用,需要的朋友可以參考下

vue中的require

一、基本概念

require 是 node 中的一個方法，他的作用是用于引入模塊、 JSON、或本地靜態(tài)文件。require會在編譯過程中被執(zhí)行，最終會得到對應文件的內(nèi)容（例如json文件）或者是文件編譯后的目錄路徑（例如圖片文件，當然如果圖片大小小于一定值，會被直接轉換為base64編碼，具體配置參考vue-cli）。

二、具體演示

1.引入json

當我們想要在代碼中使用本地json數(shù)據(jù)時，我們除了可以發(fā)起一個get請求外，我們還可以使用require直接引入：在public文件中放入測試json a.json

引入json：

const a = require('/public/a.json')
    console.log(a)

輸出內(nèi)容：

2.引入圖片

同樣的位置放入一張圖片 logo.png（6KB）和img.png(500KB)

引入圖片：

const logo = require('/public/logo.png')
console.log(logo)
const img = require('/public/img.png')
console.log(img)

輸出內(nèi)容：

注意：vue項目里，在javascript中使用圖片時，一定要用require引入，不然就會無法獲取到圖片因為在js中直接使用字符串路徑時，編譯后也會使用當前字符串路徑引入，而編譯后的圖片路徑并不一定是圖片存放的目錄路徑。而使用require引入時，就會獲取到圖片編譯后的路徑了。

三、require.context

require.context可以遍歷文件夾的文件，從中獲取指定文件，自動導入模塊。

require.context(directory, useSubdirectories, regExp, mode = 'sync')

directory: 表示檢索的目錄useSubdirectories：表示是否檢索子文件夾regExp: 匹配文件的正則表達式,一般是文件名mode: 加載模式，“sync” | “eager” | “weak” | “lazy” | “lazy-once”

也就是說當文件夾中有多個文件時，我們可以一次性引入。

引入圖片：

const imgFiles = require.context('/public', false, /.png$/)
imgFiles.keys().forEach((key) => {
  console.log(key, imgFiles(key))
})

.keys()獲取引入的所有文件的key，content(key)獲取引入文件的內(nèi)容（路徑或者base64）

引入json

const jsonFiles = require.context('/public', false, /.json$/)
jsonFiles.keys().forEach((key) => {
  console.log(key, jsonFiles(key)) // 舊的版本vue-cli可能需要 jsonFiles(key).default獲取，請自行判斷
})

引入模塊js：

建立兩個js文件

引入：

const jsFiles = require.context('/public', false, /.js$/)
jsFiles.keys().forEach((key) => {
  console.log(key, jsFiles(key))
})

引入vue文件：

我們可以用來批量注冊全局組件新建兩個組件：

批量引入并注冊：

app.use(store).use(router).mount('#app')
const comFiles = require.context('@/components', false, /.vue$/)
comFiles.keys().forEach((key) => {
  const reqCom = comFiles(key).default
  const comName = reqCom.name || key.replace(/\.\/(.*)\.vue/, '$1')
  console.log(key, reqCom)
  app.component(comName, reqCom)
})

Vue require 使用

require.context ?使用 一次引入多個文件
require.context('文件路徑'，true/false,正則表達式)
const modulesFiles = require.context('./modules', true, /\.js$/)?
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
? // set './app.js' => 'app'
? const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') ?// 替換后綴名
? const value = modulesFiles(modulePath) ?// 文件內(nèi)容
? modules[moduleName] = value.default
? return modules
}, {})

到此這篇關于vue中的require使用的文章就介紹到這了,更多相關vue中的require內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: