如何使用Webpack在Vue.js單文件組件中導入json文件

Question

重要

問題出在錯誤目錄中的文件。 這可能對您沒有幫助...

問題

我使用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

Webpack配置（簡體）：

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。

嘗試在“ vanilla” .js文件中導入相同的.json文件確實起作用 ：

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

這使我覺得有具體的東西vue-loader不隨的WebPack的原生處理工作.json進口，但我不知道是什么。

Answer 1

該錯誤表明它正在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

基本上，您的問題與文件不在正確的目錄中有關。