Vue.js编译报错：无法解析模块，resolve.extensions配置异常

错误信息 #

ERROR in ./resources/js/app.js 39:0-50
Module not found: Error: Can't resolve './views/ResetPassword' in
'D:\office project\New folder\04-restaurant\resources\js'
Did you miss the leading dot in 'resolve.extensions'?
Did you mean '[".",".wasm",".mjs",".js",".jsx",".json"]' instead of
'["",".wasm",".mjs",".js",".jsx",".json"]'?

解决方法 #

1. 校验文件路径与文件名 #

• 确认D:\office project\New folder\04-restaurant\resources\js\views目录下存在ResetPassword相关文件（如ResetPassword.vue/ResetPassword.js）
• 严格匹配文件名大小写：webpack编译时区分大小写，即使Windows系统不区分，也要保证导入语句的文件名和实际文件完全一致
• 检查路径层级：确认views目录的位置是否正确，避免漏写或多写目录层级

2. 修复webpack的resolve.extensions配置 #

错误提示已明确指出配置问题，按以下步骤修改：

• 找到项目的webpack.mix.js（Laravel+Vue项目）或webpack.config.js文件
• 定位到resolve.extensions配置项，将数组中的"*"替换为".*"，同时建议添加.vue后缀（Vue项目常用）：

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

• 保存配置后，重启npm run watch命令

3. 直接指定文件后缀（快速临时方案） #

若不想修改webpack配置，可在app.js的导入语句中明确添加文件后缀：

// 替换原导入代码
import ResetPassword from './views/ResetPassword.vue';

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