2

最近，我决定尝试使用 Vue 2.5.17 和 TypeScript。一切正常，甚至可以正常编译并且可以正常工作，但是：

  1. 在 WebStorm 2018.2 中导入.vue文件总是导致无法找到模块 @/path-to-the-module
  2. 打字稿在编译时总是抛出同样的错误
  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.vuesrc/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
4

0 回答 0