Question

我弹出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,
        },
      },

dev配置很好，这个问题是针对生产配置的。关于如何解决此问题的任何想法？

谢谢

Answer 1

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

SVG的解析路径

1 个答案: