Vue.js项目加载vue-sanitize插件报错：需适配对应loader

以下是针对该问题的具体解决步骤：

1. 配置Webpack/Babel转译vue-sanitize及其依赖 #

这个错误的核心原因是Webpack默认不会转译node_modules目录下的文件，而vue-sanitize或其依赖（如dompurify）的代码可能使用了当前环境不支持的语法，导致缺少对应loader处理。

自定义Webpack配置项目： #

修改你的Webpack配置文件，在module.rules的babel-loader规则中调整exclude选项，让Babel处理vue-sanitize和dompurify：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        // 排除node_modules中除vue-sanitize和dompurify之外的文件
        exclude: /node_modules(?!\/(vue-sanitize|dompurify))/
      }
    ]
  }
}

Vue CLI创建的项目： #

直接在vue.config.js中添加transpileDependencies配置，指定需要转译的包：

module.exports = {
  transpileDependencies: ['vue-sanitize', 'dompurify']
}

2. 检查Babel配置有效性 #

确保你的.babelrc或babel.config.js包含正确的预设，比如@babel/preset-env，以适配目标环境语法：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }]
  ]
}

3. 清理依赖并重新安装 #

依赖缓存或不完整安装可能引发异常，执行以下命令重置依赖：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

4. 验证导入代码正确性 #

确认main.js中的导入和使用方式正确：

import Vue from 'vue'
import VueSanitize from 'vue-sanitize'

// 基础使用
Vue.use(VueSanitize)

// 或自定义配置（可选）
Vue.use(VueSanitize, {
  allowedTags: ['a', 'b', 'i'],
  allowedAttributes: {'a': ['href']}
})

内容的提问来源于stack exchange，提问作者BlackLord049