使用 Vue CLI 安装 TypeScript 会返回 *找不到模块 'eslint-plugin-@typescript-eslint'*答案

【问题标题】：Installing TypeScript w/Vue CLI returns *Cannot find module 'eslint-plugin-@typescript-eslint'*使用 Vue CLI 安装 TypeScript 会返回 *找不到模块 'eslint-plugin-@typescript-eslint'*
【发布时间】：2020-04-26 01:38:33
【问题描述】：

我正在尝试将 TypeScript 安装到我们的营销网站。使用：

vue add typescript

安装后出现错误：

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Failed to load plugin @typescript-eslint: Cannot find module 'eslint-plugin-@typescript-eslint'

我尝试过的事情：

正在安装eslint-plugin-@typescript-eslint
更新 NPM 包，包括@vue/eslint-config-typescript
在 main.ts 中使用 require 而不是 import
在vue.config.js 中搞乱配置，但没有运气
更新 Vue CLI

目前使用@vue/cli 4.1.2 有什么想法吗？

vue.config.js文件：

const preRender = require('prerender-spa-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production';
const path = require('path');

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .use('file-loader')
      .loader('vue-svg-loader');
  },

  configureWebpack: () => {
    {
      isProd
        ? [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                drop_console: true
              }
            }
          })
        ]
        : [];
    }

    if (process.env.NODE_ENV !== 'production') return;

    return {
      plugins: [
        new preRender(path.resolve(__dirname, 'dist'), [
          '/',
        ])
      ],
      watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
      }
    };
  },
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "@/app.scss";'
      }
    },
    sourceMap: true
  }
};

tsconfig.json 文件；

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

main.ts文件：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import VueTouch from 'vue-touch';
import VueAnalytics from 'vue-analytics';

const isProd = process.env.NODE_ENV === 'production';

Vue.use(VueAnalytics, {
  id: process.env.VUE_APP_GA,
  router,
  debug: {
    enabled: false,
    sendHitTask: isProd
  }
});

Vue.use(VueTouch);
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

【问题讨论】：

发布你的 vue.config.js 和 main.ts
@abbaf33f 完成，请检查
我没有看到您在发布的代码中提到的对typescript-eslint 的导入引用。如果你在某处导入它，你确定它存在于node_modules/@typescript-eslint文件夹中吗？
我没有导入它，文档没有说我必须导入它。我使用 TS 的另一个项目在任何地方都没有导入。我应该进口吗？
确保它包含在 package.json 的 devDependencies 部分中，并且它确实存在于 node_modules 文件夹中。

标签： typescript vue.js vue-cli

【解决方案1】：

试试这个

在你的 src 文件夹中添加下面的类型定义文件（创建一个新的 ts 定义文件）

ambient.d.ts

并像下面这样声明模块

declare module 'eslint-plugin-@typescript-eslint'

【讨论】：

我创建了文件ambient.d.ts 并在其中添加了declare module 'eslint-plugin-@typescript-eslint'，但得到了同样的错误。