Vue.jsで外部htmlを読み込む方法

Question

Vue.jsで外部htmlを読み込もうと試みているのですがCannot GET ~/index.htmlエラーが起こります。

下記が実装した内容です
vueファイル

<template>
  <div>
　　　　　　　　　<div>Hello World</div>
    <div v-html="htmlContent"></div>
  </div>
<template>

<script>
export default {
  data() {
    return {
      htmlContent: "",
    };
  },
  mounted: function () {
    this.loadHtml();
  },
  methods: {
    loadHtml() {
      fetch("../index.html").then((res) => {
        res.text().then((html) => {
          this.htmlContent = html;
        });
      });
    },
  },
};
</script>

読み込みたい外部html

<div class="text">test </div>

フォルダ構成

├── hoge
　　　　　 　　├── index.html       対象外部ファイル
　　　   ├── js　　フォルダ
       　 ├── index.vue    対象のvueファイル   
他にルートとなるApp.vueが存在しそこで/hoge/js/index.vueをよんでいます。
/hoge/js/index.vueで書いている<div>Hello World</div>は表示できています。

なぜエラーが起こってしまうかお分かりの方ご教授ください

Comments

[runnynose]

Vueのルートになるファイルは<hoge/jsフォルダ/index.vue>になりますか？
それともApp.vueなど、別でありますか？

[ponpon00]

ルートとなるApp.vueが存在しており、そこで/hoge/js/index.vueをよんでいます。
v-htmlの上に書いてある<div>Hello World</div>は表示できています。

[Lhankor_Mhy]

開発環境は Vue cli ですか？

[ponpon00]

npm でvueを読み込んでいます

[Lhankor_Mhy]

では、ビルド｜バンドルツールの問題かもしれませんね。質問タグに追加してみてはいかがですか？

[runnynose]

App.vueから相対でfetch("パス")部分は指定する必要があったような。。。
うるおぼえです^^;

Answer 1

サーバのパスの解決方法を参考してください。
ビルド時に作成されるファイルからの、読み込むHTMLのパスを指定します。

具体的に、load.html 等読み込む静的なファイルを public/ や static/ 等に配置し、ビルド時に dist/ 下に作成されるようにし、絶対パスで読み込みます。

dist/load.html // build 時に作成される

public/load.html // 読み込むファイルを配置 

    methods: {
      loadHtml() {
        fetch("/load.html").then((res) => {
          res.text().then((html) => {
            this.htmlContent = html;
            console.log(html)
          });
        });
      },
    }