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)  // 文件内容
   modules[moduleName] = value.default
   return modules
 }, {})

webstorm中vue工程的require方法不识别，unresolve method require
 
解决方法：
 
cnpm install @types/node --save-dev
 
 

vue 使用require引入某个文件，判断本地是否有某个文件
 
在本地电脑有host.json文件，在项目中引入这个文件
 
 
1.使用require.context判断某个文件是否存在
 
require.context(引入某个文件的路径， 是否遍历该路径下的所有子目录，正则匹配后缀名称)
 
let obj = require.context(
      "/Users/Administrator/test-demo",
      false,
      /\host\.json$/
);  // 检索符合是 host.json 后缀的所有文件
let host = obj.keys().filter(it => it === "./host.json"); // 过滤host.json完全匹配文件
if (host && host.length) {
      let hostname = require("/Users/Administrator/test-demo/host.json");
      console.log(hostname);
}
 
obj.keys()返回所有符合后缀是 host.json 的文件名数组，并每个项都是以路径的形式显示，所以在文件的前面有./
 
 obj.keys() = ["./1host.json", "./host.json"]
 
我需要的是完全匹配 host.json 文件，所以使用数组过滤函数filter过滤host.json文件，如果存在文件则使用require去读取文件内的数据
 
如果检索不到host.json后缀的文件，obj.keys()返回一个空数组
 
2.使用 try……catch……
 
try {
      let hostname = require("/Users/Administrator/test-demo/host.json");
      console.log(hostname);
    } catch (error) {
      console.log(1111);
    }
 
如果检索不到host.json后缀的文件，进入catch内，如果有安装eslint,会有警告信息，对强迫症者不友好。如果不介意，肯定是这个方法好，代码少😄
 

Vue3解决ref赋值为require(’’)时数据无法响应问题
 
问题代码：
 
const useIcon = () => {
    let iconSrc = ref('');
    let setupModelShow = ref(false);
	
	iconSrc = require('../assets/img/url.png');
	
    const handleServe = () => {
        iconSrc = setupModelShow.value ? require('../assets/img/url.png') : require('../assets/img/url-active.png');
        console.log(iconSrc);
        setupModelShow.value = !setupModelShow.value;
    }

    return {
        iconSrc,
        setupModelShow,
        handleServe,
    }
};
 
上面代码中iconSrc确实在变化，但页面上并没有更新。
 
问题原因：ref()只能监听简单数据类型，此处应监听为字符串，而不是直接监听require()返回值（require()返回值是一个模块）。
 
问题解决（将require()返回值显示转化为String类型即可）：
 
const useIcon = () => {
    let iconSrc = ref(String(require('../assets/img/url.png')));
    let setupModelShow = ref(false);

    const handleServe = () => {
        iconSrc.value = setupModelShow.value ? require('../assets/img/url.png') : require('../assets/img/url-active.png');
        setupModelShow.value = !setupModelShow.value;
    }

    return {
        iconSrc,
        setupModelShow,
        handleServe,
    }
};