VueJS與打字稿單文件組件：無法找到模塊stuff.vue

Question

我有一個簡單的項目結構：

/src/app2/main.ts /src/app2/components/lib.ts /src目錄/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組件。

Answer 1

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

嘗試增加appendTsSuffixTo TS-裝載選項在webpack.config.js

webpack2

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

Answer 2

您可以在github上this PR引用。其實這不是一個錯誤，只是一個使用問題。

我假設你想寫證監會與<script lang="ts">，<script lang="tsx">，*.ts爲utils的功能&類和*.tsx功能性純組分。

ts-loader只能識別*.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-裝載機應當如下配置：

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

這意味着，在正常* .TS和* .tsx文件傳遞給TS-loader會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：

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

說的WebPack配置完成後。對於ts​​x支持，您應該安裝一些JSX類型並編寫相關的.d.ts文件

您可以在github上檢查this repo瞭解更多詳情。

祝你好運！