require
在React和VUE里,require路径上无法使用变量(会因找不到上下文环境而查找失败),可通过require.context()解决。
变量在路径上,require找不到上下文环境:require("../assets/image/" + 变量 + "/img.jpg")
变量是最后的文件名或部分文件名,上下文环境找的到:require("../assets/image/ipad/" + "变量.jpg")
require("../assets/image/ipad/i" + "变量.jpg")
require("../assets/image/ipad/img" + "变量.jpg")
require("../assets/image/ipad/img.jpg")
解决
require.context()
传入三个参数分别对应:
- 路径
- 是否向下级目录查找
- 正则匹配
const context = require.context("../assets/image/", true, /\.(png|jpg)$/);
// 相当于"../assets/image/ipad/img.jpg"
context("./ipad/img.jpg");
指定上下文环境后,路径上可用变量
let type = "ipad";
// "../assets/image/ipad/img.jpg"
context("./" + type + "/img.jpg");