hb_sis_zhfx/vue.config.js

const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);
// const SVGSpriteLoaderPlugin = require("svg-sprite-loader/plugin");

function extendDefaultPlugins(arr) {
    let plug = [
        'removeDoctype',
        'removeXMLProcInst',
        'removeComments',
        'removeMetadata',
        'removeEditorsNSData',
        'cleanupAttrs',
        'mergeStyles',
        'inlineStyles',
        'minifyStyles',
        'cleanupIDs',
        'removeUselessDefs',
        'cleanupNumericValues',
        'convertColors',
        'removeUnknownsAndDefaults',
        'removeNonInheritableGroupAttrs',
        'removeUselessStrokeAndFill',
        'removeViewBox',
        'cleanupEnableBackground',
        'removeHiddenElems',
        'removeEmptyText',
        'convertShapeToPath',
        'convertEllipseToCircle',
        'moveElemsAttrsToGroup',
        'moveGroupAttrsToElems',
        'collapseGroups',
        'convertPathData',
        'convertTransform',
        'removeEmptyAttrs',
        'removeEmptyContainers',
        'mergePaths',
        'removeUnusedNS',
        'sortDefsChildren',
        'removeTitle',
        'removeDesc'
    ];
    return plug.concat(arr);
}

// 添加less继承
function addStyleResource(rule) {
    rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                resolve('src/assets/styles/common/common.less')
            ]
        })
}


module.exports = {
    chainWebpack: (config) => {

        // 路径别名
        config.resolve.alias
            .set("@", resolve("src"))
            .set("@node", resolve("node_modules"))
            .set("@com", resolve("src/components"))
            .set("@assets", resolve("src/assets"));

        // less 继承
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
        types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)));

        // svg 雪碧图
        config.module // 排除其他svg-loader
            .rule('svg')
            .exclude.add(resolve('src/assets/icon/svg'))
            .end()
            .exclude.add(resolve('src/assets/icon/svg_fill'))
            .end();

        // svg雪碧图
        const svgRule = config.module.rule('icons');
        svgRule.test(/\.svg$/)
            .include.add(resolve('src/assets/icon/svg'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'svg-[name]',
                // extract: true,
                // publicPath: "img/",
                // spriteFilename: "svg-sprite-[hash:8].svg",
            });

        // config
        //     .plugin("svgsprite")
        //     .use(SVGSpriteLoaderPlugin, [{ 
        //       plainSprite: true
        //     }]);

        // svgo 去除svg中无用元素
        svgRule.use('svgo-loader').loader('svgo-loader').options({
            plugins: extendDefaultPlugins([{
                name: "removeAttrs",
                params: {
                    attrs: 'fill',
                }
            }])
        });

        // svg雪碧图 不去除fill属性
        // const svgRuleFill = config.module.rule('icons_fill');
        // svgRuleFill.test(/\.svg$/)
        //     .include.add(resolve('src/assets/icon/svg_fill'))
        //     .end()
        //     .use('svg-sprite-loader')
        //     .loader('svg-sprite-loader')
        //     .options({
        //         symbolId: 'fill-[name]',
        //         // extract: true,
        //         // publicPath: "img/",
        //         // spriteFilename: "svg-sprite-[hash:8].svg",
        //     });

        // // config
        // //     .plugin("svgsprite")
        // //     .use(SVGSpriteLoaderPlugin, [{ 
        // //       plainSprite: true
        // //     }]);

        // // svgo 去除svg中无用元素
        // svgRuleFill.use('svgo-loader').loader('svgo-loader').options({
        //     plugins: extendDefaultPlugins([])
        // });

    },
}