typescript - Vue CLI 3 + Typescript + TSLint および Vue 2.5.17

Question

最近、Vue 2.5.17 と TypeScript をいじってみることにしました。すべてが正常に動作し、コンパイルも正常に動作しますが、次のようになります。

1. WebStorm 2018.2で.vueファイルをインポートすると、常にCannot find module @/path-to-the-module が発生する
2. Typescript は、コンパイル時に常に同じエラーをスローします。
3. モジュールが見つからないという事実にもかかわらず、作業ページが表示され、コンソールにエラーはなく、モジュールが見つからないために使用できない HMR やその他の機能が表示されるため、コンパイルは完了しません。

これは私の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"
    ],
    "plugins": [
      { "name": "ts-vue-plugin" }
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

そして、GitHub の多くの問題と問題の解決方法に関する記事を読んだ後の私のvue.config.jsは次のとおりです。

module.exports = {
    runtimeCompiler: true,
    chainWebpack: (config) => {
        config.module.rule('vue').use('vue-loader').loader('vue-loader').tap((options) => {
            if (!options.hasOwnProperty('loaders')) {
                options.loaders = {};
            }
            options.loaders.ts = 'ts-loader!tslint-loader';
            return options;
        });
        config.module.rule('ts').use('ts-loader').loader('ts-loader').tap((options) => {
            options.appendTsSuffixTo = [/\.ts\.vue$/];
            options.appendTsxSuffixTo = [/\.tsx\.vue$/];
            options.transpileOnly = true;
            return options;
        });
    }
};

ただし、問題はまだあります。

これはVue ui Web インターフェイスを使用して構築されたプロジェクトであるため、基本的には問題なく動作するはずです。すべてのshim- .d.ts * ファイルはsrc/フォルダーのルートにあり、ここでは何も変更されていません。バニラプロジェクトとの唯一の違いは、 App.vueファイルを からに移動したことですsrc/App.vue。src/components/App.vue

アップデート

'../src/components/App' からアプリケーションをインポートします。

ERROR in /home/ubuntu/Development/VueProject/src/main.ts
2:25 Cannot find module '../src/components/App'.
    1 | import Vue from 'vue';
  > 2 | import Application from '../src/components/App';
      |                         ^
    3 | import router from '@/router';
    4 | import '@/utils/registerServiceWorker';
    5 |

  To create a production build, run yarn build.

No lint errors found
Version: typescript 3.1.3, tslint 5.11.0
Time: 4223ms

'@/components/App' からアプリケーションをインポートします。

ERROR in /home/ubuntu/Development/VueProject/src/main.ts
2:25 Cannot find module '@/components/App'.
    1 | import Vue from 'vue';
  > 2 | import Application from '@/components/App';
      |                         ^
    3 | import router from '@/router';
    4 | import '@/utils/registerServiceWorker';
    5 |

  To create a production build, run yarn build.

No lint errors found
Version: typescript 3.1.3, tslint 5.11.0
Time: 4223ms