Javascript 如何使用Webpack在Vue.js单文件组件中导入json文件 重要的

问题是文件位于错误的目录中。这可能对你没有帮助

问题 我正在使用Vue.js单文件组件，并希望在其中一个组件中导入

.json

文件，但我不知道如何执行此操作。以下是我想做的：

src/App.vue

包含：

import data from './tree.json'; // This does not work!

export default {
  /* Component def */
};

Webpack然后给出以下错误：

ERROR in ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './tree.json' in 'C:\src'
 @ ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&) 8:0-31
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/app.js
 @ multi ./src/app.js

网页包配置（简化）：

我正在使用Vue.js 2.5和Webpack 4.28

尝试将相同的

.json

文件导入“香草”

.js

文件，但确实有效：

// In src/app.js
import data from './tree.json';

---

这让我想到，

vue加载器

有一个特定的东西，它不能与Web包对

.json

导入的本机处理一起工作，但我不知道是什么。

错误表明它正在src/目录中查找tree.json文件。如果没有，那就是你的问题

⚠️ Since webpack >= v2.0.0, importing of JSON files will work by default. You might still want to use this if you use a custom file extension. See the v1.0.0 -> v2.0.0 Migration Guide for more information

---

基本上，您的问题与文件不在正确的目录中有关。

您确定您的

树.json

文件和

App.vue

文件位于同一文件夹中吗？您应该能够导入而不必使用

.json

扩展名，允许文件位于同一文件夹中（与上面的注释相同）哇我在youtube上关注你！-：继续努力！我知道webpack应该处理json文件，而且确实如此。如问题中所述，我能够从vanilla.js文件而不是.vue文件加载json文件。您是否将.json添加到您的网页解析扩展名中？我有一种感觉：）

⚠️ Since webpack >= v2.0.0, importing of JSON files will work by default. You might still want to use this if you use a custom file extension. See the v1.0.0 -> v2.0.0 Migration Guide for more information