vue 路由文件 无法识别@ 报错this dependency was not found:

当在 Vue 路由文件中引用组件时，可以使用相对路径或别名（alias）来引用，其中别名可以在 webpack 的配置中进行设置。通常情况下，@ 符号代表 src 目录的路径，也是一个别名。如果在路由文件中使用 @ 来引用组件时出现了“this dependency was not found”这样的错误提示，可能是以下原因所致：

1. webpack 配置中没有正确设置别名
可以在 webpack 的配置文件中设置一个 alias，把 @ 映射到项目的 src 目录。如下面的例子，将 @ 映射到 src 目录：

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

2. TypeScript 中的路径映射问题
如果在 TypeScript 中使用了路径映射来解析路径，如下所示：

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

则需要在 webpack 配置中设置 resolve.modules，将项目根目录加入其中：

// webpack.config.js
module.exports = {
  resolve: {
    modules: [
      path.join(__dirname, './'),
      path.join(__dirname, './node_modules')
    ]
  }
}

3. 项目结构变更或路径错误
如果项目结构发生了变更，或者组件的路径写错了，也会出现 “this dependency was not found”这样的错误提示。在这种情况下，需要检查组件的路径是否正确，或者对项目结构进行调整。

总之，无法识别 @ 符号的错误往往是因为 webpack 配置问题或路径设置不正确，需要仔细检查并进行调整。