vue.js--JSONファイルをロードする2つの方法

1037 ワード

方法1:
importが直接導入することで、dataを直接呼び出すことでjsonファイルの内容を取得できます.
import data from 'static/h5Static.json'

この方法は比較的直接的であるが,パッケージング後にJSONファイルを変更することに気づき,結局レンダリングされたページは最初にJSONファイルをパッケージングしてレンダリングされたページと同様であり,私の望む結果には至らないため,方法2を試みた.
方法2:
axiosリクエストにより、前のブログaxiosのパッケージを参照できます.
1.http.jsにリクエストメソッドを追加
export const $getJson = function (method) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url: method,
      dataType: "json",
      crossDomain: true,
      cache: false
    }).then(res => {
      resolve(res)
    }).catch(error => {
      reject(error)
    })
  })

2.インタフェースのパッケージファイルに$getJson要求方式を導入
import{$get,$post,$getJson}from '../http';

//  JSON  
const getH5StaticJson = data => {
  return $getJson('static/h5Static.json',data)
}

3.構成で使用
this.$api.user.getH5StaticJson({}).then(res => {
      consloe.log(res)
 });