web-dev-qa-db-ja.com

Vue Cli 3では、WebpackでSVGを処理できません

SVGアセットの場合、Vue Cliのデフォルトは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文字列/パスとしてコンポーネントにインポートしています。

どうもありがとう。

javascriptwebpackvue.jsvuejs2vue-cli
7
Michael Giovanni Pumo

これで、回避策を見つけるのにしばらく時間がかかりました。基本的に、.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')
  }
}
7
Dom Walker

Vue CLI 3.0ベータ版のWebpackドキュメントは、既存のベースローダーを 置き換える方法の例で更新されました 。svg-Sprite-loaderつまり、vue.config.jsに次の構成を追加する必要があります。

chainWebpack: config => {
  config.module
    .rule('svg')
    .use('file-loader')
    .loader('svg-Sprite-loader')
}
3
eay

Vue CLI 3.0.3を使用していますが、この構成でうまくいきますか????

const path = require('path');
const glob = require('glob');
const SpriteLoaderPlugin = require('svg-Sprite-loader/plugin');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new SpriteLoaderPlugin()
    ]
  },
  chainWebpack: config => {
    config.module.rules.delete('svg');

    config
      .entry('app')
      .clear()
      .add(path.resolve(__dirname, './src/main.ts'))

    config
      .entry('Sprite')
      .add(...glob.sync(path.resolve(__dirname, `./src/assets/icons/*.svg`)));

    config.module.rule('svg')
      .test(/\.(svg)(\?.*)?$/)
      .use('file-loader')
      .loader('svg-Sprite-loader')
      .options({
        extract: true,
        spriteFilename: 'icons.svg'
      })
  }
};
2
ChucKN0risK

webpack セクションのバージョン3.xのVue CLIドキュメントは、次のようなものを使用することを提案しています：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // clear all existing loaders.
    // if you don't do this, the loader below will be appended to
    // existing loaders of the rule.
    svgRule.uses.clear()

    // add replacement loader(s)
    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
}

Vue-svg-loader 構成ガイド でも同じアプローチを示唆しています。

1
R3ct0r