日期: 2021 年 11 月 29 日

  • 替换vant加载的外部资源来避免nginx策略屏蔽

    某项目因前置nginx限制较多,不允许站内调用外部资源,所以因vant引用了cdn的图标,以及通过data方式加载图标资源,需要对vant进行修改,但又不想去自己弄个vant的修改版,所以从build之后的文件入手。

    先创建一个localFilterPlugin.js,放在src/libs内,或者其他文件夹,比如utils,看你的习惯。内容如下:

    /*
     * @Date: 2021-11-26 15:43:28
     * @LastEditors: Future Meng
     * @LastEditTime: 2021-11-26 18:19:11
     */
    // 用于向控制台输出带颜色的问题提示
    const fs = require('fs') // node的文件系统模块,用于读取操作系统文件
    const path = require('path') // node提供的一些用于处理文件路径的工具
    const chalk = require('chalk')
    
    class LocalFilterPlugin {
      static defaultOptions = {
        filenameReg: /^chunk-mobile\..*\.css$/,
        originContent: /@font-face[^}]+}/g,
        newContent: '',
        assetsPath: '../../dist/css'
      };
    
      constructor(options = {}) {
        this.options = { ...LocalFilterPlugin.defaultOptions, ...options }
      }
    
      apply(compiler) {
        const _this = this
        compiler.plugin('done', function(compilation, callback) {
          const filePath = path.resolve(__dirname, _this.options.assetsPath)
    
          fs.readdir(filePath, (err, files) => {
            // 读取文件路径
            if (err) {
              console.log(chalk.yellow('读取文件夹异常:\n' + err.message + '\n'))
            }
            files.forEach((filename) => {
              // 找到符合正则规则的文件
              if (_this.options.filenameReg.test(filename)) {
                // 读取该文件
                const fileDir = path.resolve(filePath, filename)
                fs.readFile(fileDir, 'utf-8', (err, data) => {
                  // 读取文件内容
                  if (err) {
                    console.log(chalk.yellow('读取文件异常:\n' + err.message + '\n'))
                    return
                  }
    
                  // 替换文件内容
                  const result = data.replace(_this.options.originContent, _this.options.newContent)
                  fs.writeFile(fileDir, result, (err) => {
                    if (err) {
                      console.log(chalk.red('写入修改后的文件异常:\n' + err.message + '\n'))
                      return
                    }
                    console.log(chalk.cyan(filename + '替换完成'))
                  })
                })
              }
            })
          })
        })
      }
    }
    
    module.exports = LocalFilterPlugin
    

    然后在vue.config.js中添加对这个自定义插件的引用。

    const LocalFilterPlugin = require('./src.mobile/libs/localFilterPlugin')
    
    module.exports = {
            configureWebpack: config => {
        const configNew = {}
        if (process.env.NODE_ENV === 'production') {
          configNew.externals = externals
          configNew.plugins = [
            // 构建后剔除@font-face
            new LocalFilterPlugin({
              options: {
                filenameReg: /^chunk-mobile\..*\.css$/,
                originContent: /@font-face[^}]+}/g,
                newContent: '',
                assetsPath: '../../dist/css'
              }
            })
          ]
        }
        return configNew
      },
    }

    就这些。

    参考资料:https://blog.csdn.net/qq_31968791/article/details/102900349