时间戳

首页 > 解决方案 > SVG 的解析路径

svg - SVG 的解析路径

问题描述

我弹出 CRA 进行一些配置。

我遇到的问题是 svg 没有解决相对路径。

我的 webpack 配置中的内容如下：

      // Process application JS with Babel.
      // The preset includes JSX, Flow, and some ESnext features.
      {
        test: /\.(js|mjs|jsx)$/,
        include: paths.appSrc,

        loader: require.resolve('babel-loader'),
        options: {
          customize: require.resolve(
            'babel-preset-react-app/webpack-overrides'
          ),

          plugins: [
            [
              require.resolve('babel-plugin-named-asset-import'),
              {
                loaderMap: {
                  svg: {
                    ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
                  },
                },
              },
            ],
          ],
          cacheDirectory: true,
          // Save disk space when time isn't as important
          cacheCompression: true,
          compact: true,
        },
      },

开发配置很好这个问题适用于生产配置。关于如何解决这个问题的任何想法？

谢谢

标签： svgwebpackcreate-react-appwebpack-4svg-react-loader

解决方案

通过覆盖公共路径修复。在 Webpack 的输出部分，将 publicPath 配置为 '/my-project/' 而不是 ''

推荐阅读