- vue中使用require(path)报错
let path = "@/assets/imgs/cloud/Directory.svg"
require("@/assets/imgs/cloud/Directory.svg") // 直接应用不会报错
require(path) // 使用变量报错，路径未找到
- 原因：
- webpack本身是一个预编译的打包工具，无法预测未知变量路径 不能require纯变量路径
- require(path) ,path 至少要有三部分组成, 目录+文件名+后缀
- 目录 => webpack 才知道从哪里开始查找
- 后缀 => 文件后缀，必须要加上，不然会报错
- 文件名 => 可用变量表示
- 解决方法：
- 网上说是在webpack 中加入下面代码，重新启动就会好使，这个方案暂时没有试过，参考地址，下面为
webpack.config.js的配置
// webpack.config.js
{
module: {
// require
unknownContextRegExp: /$^/,
unknownContextCritical: false,
// require(expr)
exprContextRegExp: /$^/,
exprContextCritical: false,
// require("prefix" + expr + "surfix")
wrappedContextRegExp: /$^/,
wrappedContextCritical: false
}
}
value.svg = require('@/assets/' + item.svg ) // 不能完全使用变量，前置地址必须是静态地址，否则会报错
- 使用require.context（require.context还可以实现项目工程化，在项目中自动引入文件以及配置svg应用广泛参考地址）
require.context(directory, useSubdirectories = false, regExp = /^\.\//)
// require.context 有三个参数
// directory：说明需要检索的目录
// useSubdirectories：是否检索子目录
// regExp: 匹配文件的正则表达式
const context = require.context('./assets', true, /\.png$/); // 根据路径正则读取文件
const imgName = './1.png';
const Img = context(imgName);
