查看本专栏目录

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	Openlayers 【入门教程】 - 【源代码+示例 300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	MapboxGL【入门教程】 - 【源代码+图文示例150+】
4	Cesium 【入门教程】 - 【源代码+综合教程 200+】
5	threejs【中文API】 - 【源代码+图文示例200+】
6	Shader 编程 【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程 【配置+应用教程 100+】
9	GIS数字孪生与大模型 【应用实战 100+】
10	报表与数字大屏 【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】

在 Vue 项目中引用 JSON 文件非常简单，尤其是当文件内容是一个数组时。以下是具体步骤和示例代码：

---

1. 将 JSON 文件放在合适的位置

通常会将 JSON 文件放在 public 或 src/assets 目录下：

• 如果放在 public 文件夹中，可以通过相对路径直接访问。
• 如果放在 src/assets 文件夹中，需要通过 import 引入。

---

2. 引用 JSON 文件的方式

方式一：使用 import 引入（推荐）

假设你的 JSON 文件名为 data.json，内容如下：

[
  {
    
     "id": 1, "name": "Alice" },
  {
    
     "id": 2, "name": "Bob" },
  {
    
     "id": 3, "name": "Charlie" }
]

步骤：

1. 将 data.json 放在 src/assets 文件夹中。
2. 在 Vue 组件中通过 import 引入并使用。

代码示例：

<template>
  <div>
    <h3>JSON 数据列表</h3>
    <ul>
      <li v-for="item in jsonData" :key="item.id">
        {
   
   { item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
// 引入 JSON 文件
import jsonData from '@/assets/data.json';

export default {
  data() {
    return {
      jsonData, // 将 JSON 数据绑定到组件的 data 中
    };
  },
};
</script>

说明：

• @ 是 Webpack 的别名，表示 src 文件夹。
• JSON 文件会被自动解析为 JavaScript 对象或数组。

---

方式二：通过 fetch 或 axios 动态加载

如果 JSON 文件放在 public 文件夹中，可以使用 fetch 或 axios 动态加载。

步骤：

1. 将 data.json 放在 public 文件夹中。
2. 使用 fetch 或 axios 加载 JSON 文件。

代码示例：

<template>
  <div>
    <h3>JSON 数据列表</h3>
    <ul>
      <li v-for="item in jsonData" :key="item.id">
        {
   
   { item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jsonData: [], // 初始化为空数组
    };
  },
  mounted() {
    // 使用 fetch 加载 JSON 文件
    fetch('/data.json') // public 文件夹下的文件可以直接通过根路径访问
      .then((response) => response.json())
      .then((data) => {
        this.jsonData = data; // 将数据赋值给 jsonData
      })
      .catch((error) => {
        console.error('加载 JSON 文件失败:', error);
      });
  },
};
</script>

说明：

• public 文件夹中的文件不会被 Webpack 处理，而是直接复制到构建目录中，因此可以通过根路径访问。
• 如果使用 axios，代码类似，只需将 fetch 替换为 axios.get。

---

3. 总结两种方式的适用场景

• import 方式：
  • 适用于静态数据，数据在编译时确定。
  • 数据会被打包进最终的 JavaScript 文件中。
• fetch 或 axios 方式：
  • 适用于动态加载的数据，或者 JSON 文件较大、不需要每次都加载的情况。
  • 数据不会被打包进 JavaScript 文件中，而是运行时从服务器加载。

根据你的需求选择合适的方式！