使用vue-svg-loader插件, 可以让svg格式的文件(比如图片),当成组件在项目中引入, 十分方便。

但是有时会出现"Invalid component definition"报错, 需要我们在webpack中配置一下

// vue.config.js
module.exports = {
  //1. 需先删除默认配置中处理svg
  chainWebpack: (config) => {
    config.module.rules.delete("svg"); 
  },
  // 2.配置loader
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.svg$/,
          loader: "vue-svg-loader",
        },
      ],
    },
  },
};