vue-cli 4 配置 svg 和 image 内联

vue-cli 5 配置方法 参考 https://qinshenxue.com/article/vue-cli5-svg-inline-webpack-config.html

vue-cli 4 配置如下，需要先清除 svg 的 loader 配置

{
    chainWebpack: (config) => {
        config.module.rule('svg').uses.clear()

        config.module
            .rule('svg')
            .exclude.add(resolve('src/components/SvgIcon/icons'))
            .end()
            .test(/\.(svg)(\?.*)?$/)
            .use('url-loader')
            .loader('url-loader')
            .options({
                limit: 1000000000
            })

        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/components/SvgIcon/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'svgicon-[name]'
            })
            .end()

        config.module
            .rule('images')
            .use('url-loader')
            .tap((options) => {
                options.limit = 1000000000
                return options
            })
    }
}