Question

一天中的好时光，
最近，我决定使用Vue 2.5.17和Typescript。一切正常，甚至编译也可以，但是：

WebStorm 2018.2中 .vue 文件的导入始终导致 找不到模块@ /模块路径
打字稿在编译时总是抛出相同的错误
尽管未找到模块，但我得到一个工作页面，控制台中没有错误，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"
  ]
}

这是我的 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

Vue CLI 3 +打字稿+ TSLint和Vue 2.5.17

0 个答案: