vue2.5 typescript引入自己的ts類 無法找到模塊

使用Vue+ts開發(fā)項目時，定義了一個ApiReq類用于api的訪問。但無法在*.vue文件中引用，使用js作為文件結(jié)尾卻可以引用，把代碼貼出來大家看一下。

• 文件目錄
  
• api/index.ts

import axios, { AxiosInstance, AxiosPromise } from 'axios';

const API_URLS = {
  user   : {
    get   : '/tslint.json',
    post  : '/tslint.json',
    put   : '/tslint.json',
    delete: '/tslint.json'
  },
  list   : {
    get   : '/tslint.json',
    post  : '/tslint.json',
    put   : '/tslint.json',
    delete: '/tslint.json'
  },
  article: {
    get   : '/tslint.json',
    post  : '/tslint.json',
    put   : '/tslint.json',
    delete: '/tslint.json'
  }
};

export default class ApiReq {
  model: string;
  method: string;
  data?: object;
  connection?: AxiosInstance;

  constructor (model: string, method: string, data?: object) {
    this.model = model;
    this.method = method;
    this.data = data;
    this.connection = axios.create({
      baseURL: '/',
      timeout: 30000
    });
  }

  pull (): AxiosPromise {
    if (Object.getOwnPropertyNames(API_URLS).filter(item => (item === this.model)).length <= 0) {
      return null;
    }

    this.method = this.method || 'get';
    if (['get', 'post', 'put', 'delete'].filter(item => (item === this.method)).length <= 0) {
      return null;
    }

    this.data = this.data || {};

    switch (this.method) {
      case 'get':
        let str = '?';
        Object.getOwnPropertyNames(this.data).filter(function (val) {
          str += `${val}=${this.data[val]}&`;
          return true;
        });
        return this.connection.get(`${API_URLS[this.model][this.method]}${str}`);
      case 'post':
        return this.connection.post(API_URLS[this.model][this.method], this.data);
      case 'put':
        return this.connection.put(API_URLS[this.model][this.method], this.data);
      case 'delete':
        return this.connection.delete(API_URLS[this.model][this.method]);
    }
  }
}

*login.vue

<template>
  <div class="LoginTemplate">
    <h1 @click="onClick">{{message}}</h1>
    <Test :my="message"></Test>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import Test from './test.vue'
  /*這一句引入*/import ApiReq from '../../api/index';


  // @Component 修飾符注明了此類為一個 Vue 組件
  @Component({
    components: {
      Test: Test
    }
  })
  export default class Login extends Vue {
    // 初始數(shù)據(jù)可以直接聲明為實例的屬性
    message: string = 'Hello!';

    // 組件方法也可以直接聲明為實例的方法
    onClick (str: any): void {
      this.my();
      console.log(str);
    }

    my (): void {
      new ApiReq('user', 'get').pull().then(function (data) {
        console.log(data);
      }).catch(function (e) {
        console.log(e);
      });
    }
  }
</script>

<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>

*報錯信息

 ERROR  Failed to compile with 1 errors                                                                                                                                                                 19:21:29

This relative module was not found:

* ../../api/index in ./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/public/login.vue