Question

好的，我有一个Typescript定义文件model.d.ts。它包含我的业务逻辑中使用的类的定义，以便我可以在我的Vue.js文件中进行强类型输入。

我有一个Vue.js模板person.vue，其代码部分如下所示：

<script lang="ts">
    import axios from "axios";
    import * as _ from "lodash";
    import * as model from "model";
    // ...
</script>

但是当我尝试使用Webpack构建它时，我遇到了问题：

ERROR in I:\git\myapp\src\component\person-page\person.vue.ts
[tsl] ERROR in I:\git\myapp\src\component\person-page\person.vue.ts(27,24)
      TS2307: Cannot find module 'model'.

ERROR in ../myapp/node_modules/ts-loader!../myapp/node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!../myapp/src/component/person-page/person.vue
Module not found: Error: Can't resolve 'model' in 'I:\git\myapp\src\component\person-page'
 @ ../myapp/node_modules/ts-loader!../myapp/node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!../myapp/src/component/person-page/person.vue 10:14-30
 @ ../myapp/src/component/person-page/person.vue
 @ ../myapp/src/main.ts
 @ multi webpack-hot-middleware/client ./src/main.ts

我使用ts-loader，webpack.config.js的相关部分如下所示：

module.exports = {
    // ...
    module: {
        rules: [
            // ...
            {
                test: /.ts$/,
                use: {
                    loader: "ts-loader", options: {
                        appendTsSuffixTo: [/\.vue$/]
                    }
                },
                exclude: /node_modules/
            },
            // ...
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".js", ".vue", ".json"],
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        }
    }
};

为什么我的定义文件不起作用，如何才能在person.vue中使用它？

Answer 1

我认为您的路线有问题。 “模型”应指向没有文件扩展名的model.d.ts的完整路径。

Webpack中的Typescript定义文件

1 个答案: