报错详情：类似于

// 编译器报错：
Cannot find module '@/xx/xxx' or its corresponding type declarations.Vetur(2307)
// 编译器报错：
找不到模块“XXX.vue”或其相应的类型声明。ts(2307)
// 或者 控制台报错 this.$router 等
解决方案配置：
 
// tsconfig.json
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true, // js/ts 混用时设为false
        "jsx": "preserve",
        "importHelpers": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "noImplicitThis": true, // js/ts 混用时设为false
        "baseUrl": ".",
        "types": ["webpack-env"],
        "paths": {
            "@/*": ["src/*"]
        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src", "src/typings/*.d.ts"],
    "exclude": ["node_modules"]
// jsconfig.json (混用才需要)
    "compilerOptions": {
        "experimentalDecorators": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
// src/typings/shims-vue.d.ts
import VueRouter from 'vue-router';
import { Route } from 'vue-router';
import { Store } from 'vuex';
declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter;
    $route: Route;
    $store: Store<any>;
// src/shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
declare module 'store';
最重要，重启VSCODE，重新打开项目
 
码字不易，觉得有帮助的小伙伴记得点个赞鼓励下~
 
扫描上方二维码关注我的订阅号~

Cannot find module '@/views/login/index'
Failed to resolve async component default
vue-router.esm.js:1897 Error: Cannot find module '@/views/login/index'
at webpackEmptyContext (index.js:39)
at permission.js:90
解决方法
进入router中的index.js
component: () => import('@/views/login/index'),
compon
                                    把import xxx from 'xxx'全部放在顶部（script后）再次运行yarn build，成功打包！找不到xxx模块或者声明文件。导入声明的文件只能在顶部使用。
                                    报错详情：类似于
// 编译器报错：
Cannot find module '@/xx/xxx' or its corresponding type declarations.Vetur(2307)
// 编译器报错：
找不到模块“XXX.vue”或其相应的类型声明。ts(2307)
// 或者 控制台报错 this.$router 等
解决方案配置：
// tsconfig.json
    "compilerOptions": {
        "target": "esnext",
                                    在 Vue.js 中，使用 “@” 符号作为别名来引用项目中的相对路径是一个常见的做法。如果你在 VSCode 中使用这种方式，但是 VSCode 不能正确识别别名，则可能是由于你的项目没有正确配置别名导致的。另外，如果你使用的是 Vue CLI 创建的项目，它已经默认配置了别名，你可以在 vue.config.js 文件中查看或修改这些配置。完成配置后，你就可以在你的 Vue.js 项目中使用 @ 符号作为别名来引用相对路径了。在完成配置后，VSCode 应该能够正确识别你的别名了。
                                    这次项目在最后的部署阶段，需要部署一个测试服务器的环境，正常的环境是开发环境和生产环境，分别是‘development’和‘production’，这次了解到除了这两种还存在有‘test’，也就是测试环境。
在package.json中的配置如下：
"scripts": {
   "dev": "vue-cli-service serve",
   "prod": "vue-cli-service build",
   "test": "vue-cli-service build"
然后在服务器上进行
                                    若依项目本地运行没有问题，部署到服务器以后点击菜单切换路由，一直处于加载状态，打开控制台，发现报错Error: Cannot find module ‘@/views/xxx‘。路由懒加载，webpack版本问题，webpack4 不支持变量方式的动态 import ，新版本需要使用 require() 来解决此问题。
                                    一、问题表述
当我们想在vue页面通过import requestfrom '@client/utils/request’引入模块时，Vetur总是会提示Cannot find module ‘@xxxx’ or its corresponding type declarations。这样的错误，同时项目不能运行(如下图）。今天就解决以为这个问题。
二、项目中为什么使用别名进行模块导入?
如果使用相对导入(import myComponent from ‘…/…/…/components/myCompon
                                    项目安装eslint依赖，项目中代码报错：cannot find module ‘@babel/eslint-parser’本地项目babel-eslint依赖包已经被弃用，Babel、-eslint现在是@babel/eslint-parser。重新安装不起作用还是报错，需要先移除babel-eslint，然后安装@babel/eslint-parser。
                                    如果在js中引入本地静态资源图片时使用import img from './img/bd_logo1.png'这种写法是没有问题的，但是在typscript中是无法识别非代码资源的，所以会报错TS2307: cannot find module '.png'。
                                    最终的解决方案是在项目的根目录下有个 package.json。在里面添加一个这个 ，再删除包，重新安装，就能正常打包了。然后又本地删掉包，再去安装一次包，也没解决。又使用降级npm版本到6也未解决。具体的参考文献在gethub上，又用cnpm 安装，也未解决。
授人以鱼不如授人以渔，以下是排查过程的思路，及排查过程尝试过的方法：
该错误是点左边菜单树的时候报错，打不开页面，开始以为是修改到了路由相关代码导致的，于是各种检查，没有发现任何异常代码。接下来发现更离谱的事情是打包发到测试环境和线上没这个问题，本地死活不行，把代码回退到之前很老的版本，还是报这个错。
接下来梳理报错前到底我做了哪些操作导致这个错误，由于公司是内外网隔离，内网