vue asset内のjsonファイルを読み込めず404になる。

Question

vue.jsとvuexで作成しています。

assets内にjs/color.jsonというデータを作成しているのですが、
../assets/js/color.jsonからデータが取得できません。

詳しくは、
index.htmlに
var getColorURL = "../assets/js/color.json"と記述して、
store内でmodulesを作成しその中のactionで｀getColorURL｀を使いaxiosでデータを取得しようとしています。

  axios.get(getColorURL)
    .then(function (response) {
      context.commit('colorData', response.data)
    }).catch(function (error) {
      alert(error)
    })

https://teratail.com/questions/115098
の記事も読んでみて試したのですが、ダメでした。
ご回答お願いいたします。

Answer 1

axiosはHTTPクライアントですので外部のWebAPI（TwitterのAPIなど）を呼び出す際に使用します。

今回のように、ローカルにあるJSONファイル../assets/js/color.jsonを読み込むだけであれば、以下の１行で取得可能です。

const data = require(getColorURL)

Comments

[TaikiNamioka]

ご返信遅くなってすいません！
ありがとうございます！

Answer 2

相対パスではなくルートパスではどうでしょうか。

var getColorURL = "/assets/js/color.json"

axios.get(getColorURL)
  .then(function (response) {
    console.log(response.data)
  }).catch(function (error) {
    alert(error)
  })

Comments

[TaikiNamioka]

ご返信遅くなってすいません！
ありがとうございます！