快捷導(dǎo)航

vue中的require使用

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

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

vue中的require

一、基本概念

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

二、具體演示

1.引入json

當(dāng)我們想要在代碼中使用本地json數(shù)據(jù)時(shí)，我們除了可以發(fā)起一個(gè)get請(qǐng)求外，我們還可以使用require直接引入：在public文件中放入測(cè)試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項(xiàng)目里，在javascript中使用圖片時(shí)，一定要用require引入，不然就會(huì)無(wú)法獲取到圖片因?yàn)樵趈s中直接使用字符串路徑時(shí)，編譯后也會(huì)使用當(dāng)前字符串路徑引入，而編譯后的圖片路徑并不一定是圖片存放的目錄路徑。而使用require引入時(shí)，就會(huì)獲取到圖片編譯后的路徑了。

三、require.context

require.context可以遍歷文件夾的文件，從中獲取指定文件，自動(dòng)導(dǎo)入模塊。

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

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

也就是說(shuō)當(dāng)文件夾中有多個(gè)文件時(shí)，我們可以一次性引入。

引入圖片：

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獲取，請(qǐng)自行判斷
})

引入模塊js：

建立兩個(gè)js文件

引入：

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

引入vue文件：

我們可以用來(lái)批量注冊(cè)全局組件新建兩個(gè)組件：

批量引入并注冊(cè)：

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 ?使用 一次引入多個(gè)文件
require.context('文件路徑'，true/false,正則表達(dá)式)
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
}, {})

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

您可能感興趣的文章: