VueJS 싱글 파일 컴포넌트(타이프 스크립트 포함):모듈 정보를 찾을 수 없습니다.표시하다

VueJS 싱글 파일 컴포넌트(타이프 스크립트 포함):모듈 정보를 찾을 수 없습니다.표시하다

프로젝트 구조는 단순합니다.

/src/app2/main.ts/src/app2/components/lib.ts/src/app2/components/stuff.표시하다

웹 팩, vue-loader 및 ts-loader 포함.

main.ts에는 다음이 있습니다.

import Vue = require('vue');
import  Component from './components/lib'

new Vue({
  el: '#app2'

});

1개의 웹 팩엔트리를 사용하여 빌드하려고 할 때/src/app2/main.ts에러는 다음과 같습니다.

ERROR in C:\temp\vuetest2\proj\src\app2\components\lib.ts
(2,25): error TS2307: Cannot find module './stuff.vue'.

ERROR in ./src/app2/main.ts
Module not found: Error: Can't resolve './components/lib' in 'C:\temp\vuetest2\proj\src\app2'
 @ ./src/app2/main.ts 3:12-39

인트루먼트를 로 변경했을 경우src/app2/components/lib.ts구축될 것입니다.main.ts가 왜 빌드되지 않는지 모르겠어요.

lib.ts의 내용:

import Vue = require('vue');
import Stuff  = require('./stuff.vue');


let o = {
   Stuff
}

let componentLibrary = {
  components: o,
  registerExternal: function(v:any) {
    for(var k in o) {
        v.component(o[k].name, o[k]);
    }
  },
  registerInternal: function() {
    for(var k in o) {
        Vue.component(o[k].name, o[k]);
    }
  }
}

export default componentLibrary;

Stuff.vue는 단순한 단일 파일 vue 컴포넌트입니다.

설명: https://github.com/vuejs/vue-class-component/blob/master/example/webpack.config.js

추가해 보다appendTsSuffixTo의 ts-module 옵션webpack.config.js

웹 팩 2

{
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    use: [{
            loader: 'ts-loader',
            options: {
                appendTsSuffixTo: [/\.vue$/]
            }
        }]
},

이 PR은 github에서 참조할 수 있습니다.사실 이건 버그가 아니라 사용상의 문제입니다.

SFC를 쓰고 싶으시겠죠?<script lang="ts">,<script lang="tsx">,*.tsutils 기능 및 클래스용*.tsx기능성 순수 컴포넌트의 경우.

ts-paramaccets*.ts또는*.tsx컴파일 할 파일(파일을 찾을 수 없는 에러가 발생합니다).따라서 ts-loader에는 두 가지 옵션이 있습니다.appendTsSuffixTo그리고.appendTsxSuffixTo. 이 두 가지 옵션에서는 컴파일하는 파일에 맞는 regexp 배열을 사용할 수 있습니다.(여기에서는 ts-loader에 vue-loader가 컴파일하기 위해 이미 처리한 *.vue 파일을 제공합니다).

에 *.ts.vue 를 사용하고 있을 것입니다.<script lang="ts">SFC vue 파일(*.tsx.vue의 경우)<script lang="tsx">SFC vue 파일.ts-loader는 다음과 같이 설정할 필요가 있습니다.

  {
    test: /\.tsx?$/,
    use: [
      {
        loader: 'babel-loader'
      },
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.ts\.vue$/],
          appendTsxSuffixTo: [/\.tsx\.vue$/]
        }
      }
    ],
    exclude: /node_modules/
  },

즉, ts-loader에 전달되는 일반 *.ts 및 *.tsx 파일이 변환된 다음 추가 컴파일을 위해 babel-loader로 전송됩니다.기타 파일은 다음과 같이 끝납니다..ts.vue접미사가 붙는다.ts~하듯이*.ts.vue.ts로 끝납니다..tsx.vue되려고*.tsx.vue.tsx이 파일들은 모두 vue-loader에서 전달되었습니다.ts-loader의 승인만 기억하십시오..ts그리고..tsx파일을 표시합니다.

하지만 vue-loader는 똑똑하지 않아요<script lang="xxx">추가 컴파일을 위해 vue-module append xxx-module을 트리거합니다.<script lang="tsx">는 vue-module append tsx-module을 만듭니다.이것은 세계에 존재하지 않는 것입니다.

다행히 vue-loader를 구성할 수 있습니다.options:

  const loaders = {}
  loaders.tsx = ['babel-loader', 'ts-loader']
  loaders.ts = loaders.tsx
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: { loaders }
  },

그 후 웹 팩 설정이 완료됩니다.tsx를 지원하려면 몇 가지 JSX 유형을 설치하고 관련 .d.ts 파일을 작성해야 합니다.

자세한 내용은 github에서 이 보고서를 확인하실 수 있습니다.

행운을 빕니다.

언급URL : https://stackoverflow.com/questions/42448323/vuejs-single-file-component-with-typescript-unable-to-find-module-stuff-vue