handleFontWay插件

webpack使用

const path = require('path');
const handleFontWay = require('./handle-font-way')
module.exports = {
    ...,
    configureWebpack:{
       ...,
        plugins:[
            // 替换字体路径，使用绝对路径.
            new handleFontWay({
                replaceStr:'../fonts/element-icons',
                tragetStr:'/sys/assets/vue/fonts/element-icons'
            })
        ]
    },
   ...
}

插件编写

/**
 * @auth yihua
 * @time 2023/3/28
 * @des 由于打包后element-ui字体使用为../但是我们打包的资源会丢给系统,系统中采用静态资源,加上ngnix使用的前缀,访问不到,此处更改文件路径。
 */
const fs = require('fs')
const path = require('path')
class handleFontWay {
    constructor(options){
        this.options = options
    }

    apply(compiler){
        compiler.hooks.afterEmit.tap("handleFontWay",(compilation)=>{
            const {assets } = compilation;
            Object.keys(assets).forEach(filename=>{
                const filePath = assets[filename].existsAt;
                if(path.extname(filePath) === '.css'){
                    let content = fs.readFileSync(filePath,'utf-8');
                    content = content.replace(new RegExp(this.options.replaceStr,'g'),this.options.tragetStr);
                    fs.writeFileSync(filePath,content);
                }
            })
        })
    }
}

module.exports = handleFontWay;