typescript vue-router 中导入组件报错

在src目录下新建sfc.d.ts文件，将src/shims-vue.d.ts中的

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

剪切到该文件

在vuecli中ts使用别名@导入模块，vscode提示找不到模块

尝试了网上很多方法都没解决。

无意中发现，vscode直接新建一个工作区，再把当前项目添加进去，问题就解决了

typescript 引入三方包报错

---

报错

无法找到模块“vue-awesome-mui”的申明文件...

• 1、根据提示尝试安装它的typescript版本

  npm install @types/vue-awesome-mui

  如果报404错误说明没有这个版本，就需要用第2种方式

• 2、如下

  • 在src文件夹下创建index.d.ts文件

  • 文件中写入

    declare module 'vue-awesome-mui' {
        const content: any
        export = content
    }

  • 在tsconfig.json文件中添加

    "include": [
      "src/*.ts"
    ],

使用Vue上挂载的方法报错

在src\shims-vue.d.ts中添加

  import Vue from 'vue';
  declare module "vue/types/vue" {
    interface Vue {
        $moment: any;
    }
  }

使用vant样式失效

安装 ts-import-plugin插件

  npm i -D ts-import-plugin

配置vue.config.js

const merge = require('webpack-merge');
const tsImportPluginFactory = require('ts-import-plugin');
module.exports = {
  
  publicPath: './', // 发布路径,用相对路径，不然会报错
  chainWebpack: config => {
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap(options => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            
            before: [
              tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: 'es2015'
          }
        });
        return options;
      });
  }
};