在 vue 组件的 laravel 中导入 json 文件

Posted 2023-02-22

【中文标题】在 vue 组件的 laravel 中导入 json 文件

【英文标题】：import json file in laravel in vue component

【发布时间】：2018-06-15 05:57:08

【问题描述】：

我正在尝试在我的 vue 组件中导入一个 json 文件，但它给出了这个错误

错误 ./~/buble-loader?"objectAssign":"Object.assign"!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/src/App. Vue 未找到模块：错误：无法解析“assets/incomingData.json” '/var/www/html/mac/resources/assets/src'

脚本：

import jsonData from 'assets/incomingData.json'

export default 
  name: 'app',
  data () 
    return 
      entryData: jsonData,
      outputData: ''
    
  ,
  created () 
    this.$store.commit('setEntryData', this.entryData['bundle'])
    this.$store.commit('setTargetRate', this.entryData.targetNetRate)
  ,
  beforeMount () 
    this.$store.dispatch('calculate').then(res => 
      this.outputData = this.$store.getters.getCalculatedData
    )
  

文件夹结构：

package.json

有什么建议可以解决这个问题吗？

【问题讨论】：

将资产移动到pubilc 文件夹并尝试import jsonData from '/assets/incomingData.json'

App.vue 是否在store 文件夹内？

@user2486 : 是的 App.vue 在存储文件夹中

@06011991 你确定吗？看起来不像图片。

@06011991 ：所以只需使用 import jsonData from 'assets/incomingData.json' 进行检查？没有..双点

【参考方案1】：

assets 文件夹与您的 App.vue 文件（您从中导入 json 文件）处于同一级别。

为了从同一级别导入某些内容，请以 ./ 开始导入路径

import jsonData from './assets/incomingData.json'

如果你不使用./，webpack 将尝试在node_modules 中查找名为“assets”的包，而不是文件夹。

【讨论】：

好的！我尝试使用./ 然后我得到了这个错误ERROR in ./resources/assets/src/assets/incomingData.json Module parse failed: /var/www/html/mac/resources/assets/src/assets/incomingData.json Unexpected token (2:6) You may need an appropriate loader to handle this file type.

@06011991 这可能是由于您的 webpack 配置没有准备好解析 JSON。您是否使用任何模板来创建您的项目？

你能告诉我你所说的模板是什么意思吗？

模板（嗯，至少在 Vue 中是这样命名的）是一个准备好的文件夹，其中包含子文件夹、文件和配置，可让您轻松创建项目。查看 Laravel 文档 (laravel.com/docs/5.5/frontend)，我发现它在创建项目时使用了一个（我猜在后端术语是脚手架）。您可能需要通过搜索该配置的特定问题来查找更多信息。您可能需要检查json-loader 配置。

是的，即使我已经安装了json loader，但仍然是错误，是的，我正在为 vue 使用模板