vue.js - Promise ベースの HTTP クライアントを使用した Vue-cli: Uncaught エラー: モジュール 'http' が見つかりません

Question

この問題を特定するのを手伝ってください。ボタンをクリックしてリモート データを読み込もうとしましたが、エラーが発生しました。

キャッチされないエラー: モジュール 'http' が見つかりません...

tiny-json-httpとaxiosを使用していくつかのテストを作成しました。「vue-cli-error-http」プロジェクト フォルダーを作成した後の私の手順:

$ npm install -g vue-cli   

$ cd vue-cli-error-http   
$ vue init webpack .   
$ npm install axios --save
$ npm install tiny-json-http --save

$ npm run dev

src/components/に新しいコンポーネントLoaderTiny.vueを作成しました:

<template>
  <div class="hello">
    <h1>{{msg}} </h1>
    <hr />
    <button v-on:click="getData">Get Data</button>

  <ul v-if="posts && posts.length">
    <li v-for="(post, index) in posts" :key="`p-${index}`">
      <p><strong>{{post.title}}</strong></p>
      <p>{{post.body}}</p>
    </li>
  </ul>

  <ul v-if="errors && errors.length">
    <li v-for="(error, index) in errors" :key="`error-${index}`">
      {{error.message}}
    </li>
  </ul>
</div>

</template>

<script>
import tiny from "tiny-json-http";
import axios from 'axios';

export default {
  name: "LoaderTiny",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      posts: [],
      errors: []
    };
  },
  methods: {
    getData: function(event) {
      const reqURL = `http://jsonplaceholder.typicode.com/posts`;

      /*
      this.posts = [
        {
          userId: 1,
          id: 1,
          title:
            "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
          body:
            "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
        },
        {
          userId: 1,
          id: 2,
          title: "qui est esse",
          body:
        "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
        }
      ];
      */

      /*
      tiny.get( {reqURL} ).then(response => {
        // JSON responses are automatically parsed.
        console.log(response);
        this.posts = response.body.Items;
      }).catch(err =>  this.errors.push(err))
      */
      try {
        axios.get(reqURL)
          .then(response => {
            // JSON responses are automatically parsed.
            this.posts = response.data;
          })
          .catch(e =>  this.errors.push(e));
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>

ルーター ( src/router/index.js ) では:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import LoaderTiny from '@/components/LoaderTiny'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/test',
      component: LoaderTiny
    },
    {
      path: '/',
      component: HelloWorld
    },
  ]
})