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

中添加webpack.config.js ts-loader选项

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函数的SFC。类和功能纯组件的*.tsx。

ts-loader只能编译*.ts或*.tsx个文件（否则会导致找不到文件的错误）。所以ts-loader有两个选项：appendTsSuffixTo和appendTsxSuffixTo。这两个选项接受一个regexp数组，以匹配您要编译的文件。（这里我们给ts-loader提供已经由vue-loader处理的* .vue文件来编译）。

我假设您对<script lang="ts"> SFC vue文件使用* .ts.vue而对<script lang="tsx"> SFC vue文件使用* .tsx.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-loader追加xxx-loader以进行进一步编译，而<script lang="tsx">将使vue-loader追加tsx-loader，这是不存在的在世界上。

幸运的是，我们可以配置vue-loader的options：

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

完成webpack配置之后。对于tsx支持，您应该安装一些JSX类型并编写相关的.d.ts文件

您可以在github上查看this repo以获取更多详细信息。

祝你好运！

带有打字稿的VueJS单文件组件：无法找到模块stuff.vue

2 个答案: