Vue.js Vue Cli 3 不允许我在 Webpack 中处理 SVG

发布于04月20日

Vue Cli对于SVGassets资源默认为file-loader，但我想改用svg-sprite-loader(以及其他一些).

为此，我更新了vue.config.js文件，但它似乎仍然使用file-loader.几乎就好像它根本就没有接收我的配置一样.

vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(svg)(\?.*)?$/,
          use: [
            {
              loader: 'svg-sprite-loader',
              options: {
                name: '[name]-[hash:7]',
                prefixize: true
              }
            },
            'svg-fill-loader',
            'svgo-loader'
          ]
        }
      ]
    }
  }
}

我的设置有什么问题吗？

我仍然将SVG文件作为URL字符串/路径导入到我的组件中，而它应该是具有属性的对象.

非常感谢.

推荐答案

我花了一段时间才找到工作.基本上你需要停止文件加载器匹配.svg.我发现最好的方法是使用chainWebpack并在文件加载程序上从测试方法返回false.我已经包括了我的工作配置.

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(svg)(\?.*)?$/,
          use: [
            {
              loader: 'svg-inline-loader',
              options: {
                limit: 10000,
                name: 'assets/img/[name].[hash:7].[ext]'
              }
            }
          ]
        }
      ]
    }
  },
  chainWebpack: config => {
    config.module
      .rule('svg')
      .test(() => false)
      .use('file-loader')
  }
}

Vue.js相关问答推荐

VueJS使所有组件崩溃，而不是只有一个

Vue.js Vue Cli 3 不允许我在 Webpack 中处理 SVG

推荐答案

Vue.js相关问答推荐

VueJS使所有组件崩溃，而不是只有一个

是否可以将 nuxt3 与类星体框架一起使用

如何将字符串中的
解析为 VUE.js 中的 html 标记

如何在 vue 组件中定义变量？ (Vue.JS 2)

vue js 组件中的 this.$route 只返回 undefined

如何在 vue.js 中删除类

在没有组件的vue js中拖放

使用 vee-validate 在 vue js 中进行验证有错误

如何获取 Vue 路由历史记录？

为什么不先移动鼠标就无法滚动视差？

Vue.js 从模板中分离样式

我可以使用 vue.js v-if 来判断值是否存在于数组中

全局禁用 vuetify 组件的涟漪效应

如何在 VueJS 中访问 [ob： Observer] 的元素？

当 v-for 与对象的属性一起使用时，将 v-model 与复选框一起使用

try 通过 Vue.js 中的渲染传递props并观察它们

Vuetify RTL 风格

如何使用 Vuetify 验证复选框组

Vue组件如何命名

Apollo 客户端在向服务器发送Mutations 时返回400(错误请求)错误