Как импортировать файл json в однофайловый компонент Vue.js с помощью Webpack - PullRequest
Новая
       6

Как импортировать файл json в однофайловый компонент Vue.js с помощью Webpack

0 голосов
/ 15 января 2019

Важно

Проблема была в файле не в том каталоге. Это, вероятно, не поможет вам ...

Вопрос

Я использую отдельные файловые компоненты 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

Конфигурация веб-пакета (упрощенная): 

module.exports = {
  mode: 'development',

  entry: [
    './src/app.js',
  ],

  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
    ],
  },
};

Я использую Vue.js 2.5 и Webpack 4.28.

Попытка импортировать тот же файл .json в "ванильный" файл .js, однако работает : 

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

Это заставляет меня думать, что есть что-то специфическое для vue-loader, которое не работает с нативной обработкой Webpack для импорта .json, но я понятия не имею, что.

1 Ответ

0 голосов
/ 15 января 2019

Ошибка говорит о том, что он ищет ваш файл tree.json внутри вашей директории src /. Если его там нет, то это ваша проблема. 

⚠️ 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

По сути, ваша проблема связана с тем, что файл не находится в нужном каталоге.

...