安装vue-tel-input后导入CSS报错：模块路径未导出求助

方案1：修正webpack的resolve.extensions配置 #

错误提示明确指向了resolve.extensions的配置问题，先检查你的webpack配置文件（如webpack.config.js或vue.config.js）：

• 找到resolve.extensions数组，将其中的"*"替换为".*"
• 最终配置示例：

resolve: {
  extensions: [".*", ".wasm", ".mjs", ".js", ".jsx", ".json", ".vue"]
}

修改后重启开发服务，重新尝试导入CSS。

方案2：使用项目根目录相对路径导入CSS #

如果方案1无效，跳过package的exports限制，直接用绝对相对路径导入：

// 替换原导入语句
import '../node_modules/vue-tel-input/dist/vue-tel-input.css'

方案3：临时修正package的exports配置 #

打开node_modules/vue-tel-input/package.json，查看exports字段是否包含CSS文件路径。若没有，手动添加：

"exports": {
  ".": "./dist/vue-tel-input.common.js",
  "./dist/vue-tel-input.css": "./dist/vue-tel-input.css"
  // 保留原有其他导出项
}

注意：此修改会在重新安装依赖后被覆盖，建议仅作为临时方案，同时优先考虑升级包版本。

方案4：升级vue-tel-input到最新版本 #

运行命令更新包：

npm update vue-tel-input
# 或使用yarn
yarn upgrade vue-tel-input

新版本大概率已修复exports字段的配置问题，可直接遵循官方文档的导入方式。

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