如何将 VueLoaderPlugin 导入 TypeScript 文件？答案

【问题标题】：How to import VueLoaderPlugin toTypeScript file?如何将 VueLoaderPlugin 导入 TypeScript 文件？
【发布时间】：2019-08-01 11:56:32
【问题描述】：

我使用 TypeScript 生成 webpack 配置。

根据vue-loader documentation，我安装了vue-loader和vue-template-compiler。

我确保vue-loader 有类型定义文件：

但是，我的 TypeScript 项目没有看到 plugin.js 文件。

TS2307: Cannot find module 'vue-loader/lib/plugin'.

我试过"allowJs": true：没有效果。

另外，如果通过@ts-ignore抑制错误消息，我的应用程序将被webpack成功构建。所以问题是一些缺少声明。哪个是？

我的tsconfig.json 设置是：

{
  "compilerOptions": {

    "target": "es6",
    "strict": true,

    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,

    "lib": [
      "es2018"
    ],

    "baseUrl": "./",

    "noUnusedLocals": false,
    "noUnusedParameters": false
  }
}

更新：建议的解决方案尝试

TS7016: Could not find a declaration file for module 'vue-loader/lib/plugin'

node_modules/vue-loader/lib/index.d.ts的内容是：

import { Plugin } from 'webpack'

declare namespace VueLoader {
  class VueLoaderPlugin extends Plugin {}
}

export = VueLoader

【问题讨论】：

试试这样 import VueLoaderPlugin from 'vue-loader';
@TonyTom，感谢您的回复。不幸的是，零效应。错误信息就变成了TS2307: Cannot find module 'vue-loader'.。

标签： typescript vue.js webpack

【解决方案1】：

您可以像这样将插件导入打字稿：

import * as VueLoaderPlugin from 'vue-loader/lib/plugin';

之后，您应该会收到一大堆错误，这些错误主要与 consolidate（node.js 的模板引擎整合库）相关。

我尝试使用类似于Consolidate - Webpack build fails #295 的方法修复这些错误，但无法获得有效的 webpack 配置。

【讨论】：

感谢您的回答！不幸的是，我遇到了另一个错误。这一次，TypeScript 找不到node_modules/vue-loader/lib/index.d.ts 文件……如果你有时间，请检查答案栏中的更新。

【解决方案2】：

你试过这样吗：import { VueLoaderPlugin } from "vue-loader";

这对我有用。

【讨论】：