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

2019年7月28日 220次阅读

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

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

最佳答案 根据：
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$/]
            }
        }]
},
点赞