作者:厮守这一季德冬天_262 | 来源:互联网 | 2022-10-18 18:28
1> Max Sinev..:
@liximomo的答案几乎是正确的。您应该svg
从file-loader
处理规则中删除文件,但是规则搜索条件应该稍有不同:
module.exports = ({ config }) => {
let rule = config.module.rules.find(r =>
// it can be another rule with file loader
// we should get only svg related
r.test && r.test.toString().includes('svg') &&
// file-loader might be resolved to js file path so "endsWith" is not reliable enough
r.loader && r.loader.includes('file-loader')
);
rule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;
config.module.rules.push(
{
test: /\.svg$/,
use: ['vue-svg-loader']
}
)
// ...
return config;
}
在不更改Webpack配置规则的情况下导入SVG的另一种方法是指定内联加载器,当某些组件已经将CSS或HTML中的SVG仅仅用作文件路径时,这样做可以避免出错。例:
// disable all rules with !! and use just vue-svg-loader
import CautionIcon from "!!vue-svg-loader!../../assets/icons/exclamation-triangle-solid.svg";