首页 > 解决方案 > 将静态本地 json 文件导入 Vue 存储(从构建中排除)

问题描述

我正在尝试将本地静态 JSON 文件中的数据添加到 Vue vuex 存储中。

我希望我的 JSON 文件从捆绑过程中分离出来,这样我就可以在将来随时更改内容,而无需重建整个站点。

public我在文件夹中有我的 json 文件 [test.json]

使用下面的代码,我设法导入了数据,但它仍然被捆绑在网站的构建中。

import data from '../public/test';

export const state = () => ({
  allData: {}
})

export const mutations = {
  SET_ALL_DATA(state, data) {
    state.allData = data
  }
}

export const actions = {
  nuxtServerInit({ commit }) {
    commit('SET_ALL_DATA', data)
  }
}

我还尝试将 JSON 文件托管在 Web 服务器上,并nuxtServerInit像这样对它进行 axios 调用。但是调用的 json 文件仍然被捆绑,因为更改托管的 json 文件不会更新内容。

export const actions = {
  async nuxtServerInit ({ commit }, { $axios }) {
    const res = await $axios.$get('https://www.amq.fariskassim.com/testjson/test.json')
    commit('SET_ALL_DATA', res)
  }
}

我完全没有解决方案,所以如果有人能指出我正确的方向,我将不胜感激

标签: jsonvue.jsaxiosvuex

解决方案


推荐阅读