是否可以使用fetch()获取本地.json.文件？我最初使用import方法，但除非页面重新加载，否则网站的数据不会更新。
我试过了，但是没用：
存储/字符.ts
export const useCharactersStore = defineStore("characters", {
state: () => ({
characters: [],
}),
getters: {
getCharacters: (state) => {
return state.characters;
},
},
actions: {
fetchCharacters() {
fetch("../data.json")
.then((response) => response.json())
.then((data) => {
this.characters = data.characters;
});
},
},
});应用程序版本
import { useCharactersStore } from "~/stores/characters";
const store = useCharactersStore();
onMounted(() => {
store.fetchCharacters();
});任何帮助都将不胜感激。
1条答案
按热度按时间bn31dyow1#
也许有点晚，但我遇到了同样的问题迁移从Nuxt 2到Nuxt 3。
我当然不是这方面的Maven，所以如果有人发现一个更好的方法，或者如果我完全错了，请让我知道！
每当你在vue代码中导入一个json文件时，它们会被导入为一个模块，嵌入到构建时的代码编译中（Vue Docs）。要将json用作外部文件，你需要将你的json放在/public目录中，并使用axios或fetch通过一个lifecyle钩子加载文件。
然而，一些重要的注解，这种方法。
如果你想在你的应用中使用的json文件不是被动的，也就是说，不会改变，你应该把它放在nuxt应用的静态文件夹中。
在你的例子中，你获取了'../data/...'，这意味着服务器知道要查找的域。它不能像这样调用路由，如果你把你的json文件放在静态文件夹中，你必须给予完整的url。
1.在nuxt.config.ts的中设置baseUrl，请参阅文档了解规范。
1.然后可以使用.env变量访问static文件夹--〉$fe
然后，在数据脚本中，您可以访问json文件
侧记你也可以使用fs从服务器端加载文件。readFile阅读更多关于这方面的文章here