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了解更多详情。

祝你好运！