require

在 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()

传入三个参数分别对应：

• 路径
• 是否向下级目录查找
• 正则匹配

context = require.context("../assets/image/ipad/", true, /\.(png|jpg)$/);
// 相当于 "../assets/image/ipad/img.jpg"
context("./img.jpg");

指定上下文环境后，路径上可用变量

// "../assets/image/ipad/" + 变量 + "/img.jpg"
context("./"+"变量"+"img.jpg");