Vue项目引入router时报Module not found: Can't resolve './router'错误问询

错误原因 #

1. 路由文件命名与导入路径不匹配：你的路由配置文件实际命名为search.js，但在app.js中导入路由时使用的路径是./router，构建工具会自动在目标路径下查找router.js、router.ts或者router目录下的入口文件，找不到对应文件就会抛出模块无法解析的错误。
2. 潜在配置问题：如果你的构建工具没有配置自动识别.vue后缀，app.js中import SearchIndex from './components/omdb/SearchIndex'省略.vue后缀也会触发同类报错。

解决方案 #

你可以二选一解决核心的路由导入问题：

• 修改app.js中的路由导入语句，匹配现有文件名：
  把import router from './router'替换为import router from './search.js'
• 修改路由配置文件名，符合通用开发规范：
  把search.js重命名为router.js，和现有导入语句的路径匹配

如果同时存在.vue后缀识别问题，可在构建配置中添加扩展名自动识别规则：
如果是Vite项目，修改vite.config.js：

import { defineConfig } from 'vite'
export default defineConfig({
  resolve: {
    extensions: ['.vue', '.js', '.jsx', '.ts', '.tsx']
  }
})

如果是Webpack项目，修改webpack.config.js对应配置：

module.exports = {
  resolve: {
    extensions: ['.vue', '.js', '.jsx', '.ts', '.tsx']
  }
}

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