内容分类: 工程化

背景: 用过了ctrl 单击跳转到import 的文件或者方法的方便, 就回不去
目的: 本文主要对 ctrl 单击 无法跳转的问题的总结
还有其他的配置: 可省略文件的后缀, 还有常识import默认找index文件, 是webpack默认配置

// 首先搞清楚报错来源 ts vetur ...
import list from '@src/pages/list' // 省略了.vue后缀,

场景

1. .vue 文件引入 ts

TS2307: Cannot find module '@lib/a' or its corresponding type declarations.(ts报错)
别名出错了, 配置好别名就好

2. ts 文件 引入 vue文件

shims-vue.d.ts 
// 虽然这个文件能解决引入问题, 但是ctrl 单击跳转有问题, 跳不到引入的vue 文件, 会进入这个文件!!!!
// vue3
declare module '*.vue' {
    import { DefineComponent } from 'vue';
    const component: DefineComponent<{}, {}, any>;
    export default component;
}
// vue2
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

3. ts 文件 引入ts文件

有点尴尬, 公司的项目不能点击跳转, 自己的demo试着可以, 等后续再看到底哪里配置出错的了吧. 按理说, ts 文件 引入ts文件, 跳转应该不会出问题. 
后来发现公司的配置多了,  "include": ["shims-vue.d.ts"], 这相当于只识别这个文件了. 去掉这个配置就好了. 

4. vue 文件引入 vue组件, 省略vue后无法点击跳转.(那不省略.vue 不就好了…) 😂