首页 文章

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

提问于
浏览 次
4

我有一个简单的项目结构：

/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'

});

尝试使用1个webpack条目为 /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 ，它将构建 . 我'm at a loss as to why main.ts won' t build .

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组件 .

typescript webpack vue.js vuejs2 webpack-2

2 回答

  • 0

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

    尝试在 webpack.config.js 中添加 appendTsSuffixTo ts-loader选项

    webpack2

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

    您可以在github上的this PR上参考 . 实际上这不是一个bug，只是一个使用问题 .

    我假设您要为函数函数和类编写 <script lang="ts"> ， <script lang="tsx"> ， *.ts 的SFC，为函数纯组件编写 *.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-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以获取更多详细信息 .

    祝好运！

    回复于

相关问题