VueJS typescriptですと単一ファイルコンポーネント：</p> <p>/src/app2/main.ts /src/app2/components/lib.ts /SRC：私は、単純なプロジェクト構造を持っている

Question

モジュールstuff.vueを見つけることができません。 /app2/components/stuff.vue

webpack、vue-loader、およびts-loaderを使用します。

main.tsがあります

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

new Vue({ 
    el: '#app2' 

}); 

/src/app2/main.tsのための1つのWebPACKのエントリでこれを構築しようとし、発生したエラーは次のとおりです。

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コンポーネントです。あなたはgithubの上this PR上で参照することができ、あなたのwebpack.config.js

webpack2

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

Answer 1

。実際にはバグではなく、単なる使用上の問題です。

は、私はあなたが、機能純粋なコンポーネントの<script lang="ts">、utilsの機能のための<script lang="tsx">、*.ts &クラス、および*.tsxでSFCを書きたいと仮定します。

ts-loader accpets *.tsまたは*.tsxファイルをコンパイルします（そうしないと、ファイルが見つからないというエラーが発生します）。したがって、ts-loaderには2つのオプション、appendTsSuffixToとappendTsxSuffixToがあります。これらの2つのオプションは、コンパイルしたいファイルにマッチする正規表現の配列を受け入れます。 （ここでは、ts-loaderにvue-loaderによってすでに処理された* .vueファイルをコンパイルします）。

<script lang="ts"> SFC vueファイルには* .ts.vueを使用し、<script lang="tsx"> SFC vueファイルには* .tsx.vueを使用することを前提としています。 TS-ローダは以下のように設定する必要があります：

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

これは、通常の* .TSを意味し、* .tsxファイルはTS-ローダーに渡すtranspiledし、その後さらに、コンパイルのためのローダをバベルに送ること。 .ts.vueで終わるファイルは、.tsの末尾に*.ts.vue.ts、末尾に.tsx.vue、末尾に*.tsx.vue.tsxと末尾に付きます。これらのファイルはすべてvue-loaderから渡されました。 ts-loaderは.tsと.tsxファイルのみを受け付けます。

しかしVUE-ローダーは十分にスマートではありません、<script lang="xxx">はさらにコンパイルのためVUE-ローダーアペンドXXX-ローダーをトリガーする、と<script lang="tsx">は世界に存在していないVUE-ローダーアペンドTSX-ローダーを行います。

幸いにも、我々はVUE-ローダのoptions設定することができます。そのWebPACKのコンフィグが完了した後

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

を。 tsxをサポートするには、いくつかのJSXタイプをインストールし、関連する.d.tsファイルを作成する必要があります。

詳細については、this repoをgithubで確認してください。

幸運を祈る！

Answer 2

でappendTsSuffixTo TS-ローダオプションを追加することhttps://github.com/vuejs/vue-class-component/blob/master/example/webpack.config.js

試してくださいによると