require in vue

1. Basic concepts

require is a method in node, which is used to introduce modules, JSON, or local static files. require will be executed during the compilation process, and you will eventually get the content of the corresponding file (such as a json file) or the directory path of the compiled file (such as an image file. Of course, if the image size is less than a certain value, it will be directly converted to base64 encoding. Please refer to vue-cli for specific configuration).

2. Specific demonstration

1.Introduce json

When we want to use local json data in the code, in addition to initiating a get request, we can also use require to import it directly:
put the test json in the public file a.json

to import json:

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

Output content:

2.Introduce pictures

Put a picture logo.png（6KB）andimg.png(500KB)

Import pictures:

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

Output content:

Note: In the vue project, when using images in javascript, you must use require to introduce them, otherwise you will not be able to get the images because
when you use the string path directly in js, the current string path will also be used after compilation. , and the compiled image path is not necessarily the directory path where the image is stored. When introduced using require, the compiled path of the image will be obtained.

三、require.context

require.contextYou can traverse the files in the folder, obtain the specified file from it, and automatically import the module.

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

directory: Indicates the directory to be searched
useSubdirectories: Indicates whether to search subfolders
regExp: Regular expression for matching files, usually the file name
mode: Loading mode, "sync" | "eager" | "weak" | "lazy" | "lazy" -once"

That is to say, when there are multiple files in the folder, we can introduce them at once.

Import pictures:

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

.keys()Get the keys of all imported files, content(key) get the content of the imported files (path or base64)

Introduce json

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

Import module js:

Create two js files

and introduce:

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

Import vue files:

We can use it to register global components in batches.
Create two new components:

introduce and register them in batches:

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)
})