如何修复node_modules中element-icons.woff与.ttf文件缺失编译报错问题

编译失败，共2个错误：
未找到以下依赖项：
fonts/element-icons.ttf in ./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/element-ui/lib/theme-chalk/index.css
fonts/element-icons.woff in ./node_modules/css-loader??ref--3-oneOf-1-1!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/element-ui/lib/theme-chalk/index.css

该报错由项目打包工具未正确处理字体文件类型、或element-ui依赖安装不完整导致，可按以下方案逐一排查修复：

方案1：新增webpack字体文件处理规则（优先级最高） #

• 找到项目对应的webpack配置文件：vue-cli2项目对应webpack.base.conf.js，vue-cli3+项目对应vue.config.js
• 在配置文件的module.rules数组中新增字体文件处理规则：
  通用webpack配置写法：

  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'fonts/[name].[hash:7].[ext]'
    }
  }
  

  vue-cli3+项目vue.config.js写法：

  module.exports = {
    configureWebpack: {
      module: {
        rules: [
          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'fonts/[name].[hash:7].[ext]'
            }
          }
        ]
      }
    }
  }
  

• 配置完成后重新执行npm run serve或npm run build验证是否修复

方案2：重新安装依赖 #

如果已配置字体规则仍报错，属于依赖包安装不完整导致：

• 删除项目根目录下的node_modules文件夹、package-lock.json或yarn.lock文件
• 执行npm install或yarn install重新安装所有依赖
• 重启项目验证

方案3：临时规避方案 #

若不想修改配置可直接替换样式引入方式：

• 删除项目中import 'element-ui/lib/theme-chalk/index.css'的本地引入代码
• 在项目入口index.html的head标签内引入公共CDN的element-ui样式即可

内容的提问来源于stack exchange，提问作者Aung Zin Moe