用VScode写vue项目导入自己本地的json文件，文件路径问题

Question

问题如图，今天看黑马的vue前端开发，然后碰到了个相对路径问题，请各位帮忙看一下，我给出了我的目录结构，还有一对一错的书写方式，只想知道为什么对。为什么错。

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题分析

你使用 VScode 写 Vue 项目，遇到了导入本地 JSON 文件的相对路径问题。你的目录结构如下：

project
src
main.js
components
HelloWorld.vue
data
data.json

你尝试使用以下两种方式导入 data.json 文件：

// 方法一
import data from '../data/data.json'

// 方法二
import data from './data/data.json'

解决方案

问题的原因是 Vue 项目的构建过程会将 src 目录编译到 dist 目录下，而你在 main.js 文件中使用的相对路径是相对于 src 目录的，而不是相对于 dist 目录的。

方法一 ../data/data.json 使用了绝对路径，但是 Vue 项目的构建过程会将 src 目录编译到 dist 目录下，所以这将导致找不到文件。

方法二 ./data/data.json 使用了相对路径，但是 Vue 项目的构建过程会将 src 目录编译到 dist 目录下，所以这也将导致找不到文件。

解决方案是使用绝对路径，或者使用 Vue 的 require 函数来导入文件：

import data from './data/data.json'

或者

const data = require('./data/data.json')

代码示例

// main.js
import Vue from 'vue'
import App from './App.vue'
import data from './data/data.json'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  data: () => ({ data })
}).$mount('#app')

结论

在 Vue 项目中，使用相对路径导入文件可能会导致找不到文件的问题。可以使用绝对路径或 Vue 的 require 函数来解决这个问题。