在 vue 文件中使用 ts 的配置

1. 介绍

在 .vue 中使用 <script lang="ts"> 报如下错误：

WARNING in ./src/ImageControl.vue?vue&type=script&lang=ts 1:174-177
export 'default' (imported as 'mod') was not found in '-!../node_modules/ts-loader/index.js!../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageControl.vue?vue&type=script&lang=ts' (module 
has no exports)


ERROR in ./src/ImageControl.vue?vue&type=script&lang=ts (./node_modules/ts-loader/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/ImageControl.vue?vue&type=script&lang=ts) 4:0-29
Module not found: Error: Can't resolve './Test.vue' in 'W:\puyuan\proj\11-image-control\code\image-control\src'
resolve './Test.vue' in 'W:\puyuan\proj\11-image-control\code\image-control\src'

2. 方案

修改 ts-loader 的配置：

module.exports = {
  // ...

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',

            // 这个配置是可解决上面的报错
            options: { appendTsSuffixTo: ['\\.vue$'] },
          },
        ],
        exclude: /node_modules/,
      },
    ]
  }
};

3. 参考

• export ‘default‘ (imported as ‘mod‘) was not found in ‘../node_modules/ts-loader/index.js (opens new window)