Vue3配置带公共前缀的路由路径出现模块无法解析报错如何解决

问题原因 #

你遇到的import/no-unresolved报错和路由path配置、嵌套路由逻辑完全无关，这是ESLint的导入检查规则无法识别.vue后缀模块，或者文件路径/文件名大小写不匹配导致的错误。

排查&解决步骤 #

• 首先确认两个版本的路由配置导入语句完全一致，优先检查修改配置时是否意外改动了router文件的存放位置，或者nonPrimaryADAccounts目录下的CreateADAccount.vue文件名/目录结构：注意文件名大小写严格匹配，Windows系统文件名不区分大小写，但ESLint、生产部署环境都会校验大小写，比如文件实际名为CreateAdAccount.vue就会触发该报错。
• 确认文件路径和名称无误后，修改ESLint配置文件（通常为.eslintrc.cjs或.eslintrc.js），添加.vue后缀的解析支持：

module.exports = {
  // 其余原有配置保持不变
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.ts', '.vue']
      }
    }
  }
}

• 临时验证可以在对应导入语句末尾添加注释// eslint-disable-next-line import/no-unresolved，如果项目可以正常启动，即可确认是ESLint解析规则的问题，和路由配置本身无关。

嵌套路由的正确写法 #

如果你是要实现/NonPrimaryADAccount前缀的嵌套路由，正确配置方式如下：

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../home/HomePage.vue';
import FetchAccount from '../nonPrimaryADAccounts/FetchAccount.vue';
import CreateADAccount from '../nonPrimaryADAccounts/CreateADAccount.vue';

// 如果父路由没有公共布局，可以直接写一个仅包含<router-view />的空组件作为父级容器
const EmptyLayout = { template: '<router-view />' }

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomePage,
    },
    {
      path: '/NonPrimaryADAccount',
      component: EmptyLayout,
      children: [
        {
          path: 'FetchAccount',
          name: 'FetchAccount',
          component: FetchAccount,
        },
        {
          path: 'CreateADAccount',
          name: 'CreateADAccount',
          component: CreateADAccount,
        },
      ]
    }
  ],
});

注意：父路由对应的组件必须包含<router-view />标签，否则子路由的内容无法正常渲染。

内容的提问来源于stack exchange，提问作者Patryk Gołębiowski