Vue CLI 3 + Typescript + TSLint и Vue 2.5.17 - PullRequest
Новая
       7

Vue CLI 3 + Typescript + TSLint и Vue 2.5.17

0 голосов
/ 15 октября 2018

Доброе время суток,
Недавно я решил поиграть с Vue 2.5.17 и Typescript.Все отлично работает, даже прекрасно компилируется и работает, однако:

  1. Импорт файлов .vue в WebStorm 2018.2 всегда приводит к Не удается найти модуль @/ path-to-the-module
  2. Typescript всегда выдает одну и ту же ошибку при компиляции
  3. Несмотря на то, что модуль не найден, я получаю рабочую страницунет ошибок в консоли, HMR и других функциях, которые не должны быть доступны из-за того, что модуль не найден, поэтому компиляция не должна быть завершена.

Это мой tsconfig.json file : 

{
  "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"
  ]
}

А вот мой vue.config.js после прочтения многих проблем на github и статей о том, как решить эту проблему: 

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 , так что в основном он должен работать без каких-либо проблем.Все файлы shim- .d.ts * находятся в корне папки src / , здесь ничего не меняется.Единственное отличие от проекта vanilla заключается в том, что я переместил файл 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
...