vuecli怎么访问json

Vue CLI 项目中如何高效访问 JSON 数据

在 Vue CLI 开发中，JSON 数据作为前后端交互的常用格式，无论是静态配置文件、模拟后端接口，还是动态业务数据，都离不开对其的访问，本文将详细介绍 Vue CLI 项目中访问 JSON 数据的多种场景及具体实现方法，涵盖静态文件读取、动态数据加载、跨域处理等关键环节,助你高效搞定数据交互问题。

静态 JSON 文件的直接访问（本地资源）

对于不需要后端接口、直接作为本地资源使用的 JSON 文件（如配置文件、静态数据字典等），Vue CLI 项目中可通过静态资源路径或动态导入两种方式访问。

将 JSON 文件存放在 public 目录（推荐）

Vue CLI 的 public 目录下的文件会被直接复制到项目根目录，访问时使用基于项目根路径的绝对路径（以 开头）。

操作步骤：

• 存放文件：在项目根目录创建 public 文件夹（若无则新建），将 JSON 文件存入其中，public/config.json：

  // public/config.json
  {
    "appTitle": "Vue CLI Demo",
    "version": "1.0.0",
    "apiBaseUrl": "https://api.example.com"
  }

• 访问文件：在组件中通过 fetch、axios 或直接使用 import 方式读取（注意：public 目录下的文件不会被 webpack 处理，需通过 HTTP 请求获取）。

  示例（使用 fetch）：

  export default {
    data() {
      return {
        config: {}
      }
    },
    async created() {
      try {
        const response = await fetch('/config.json') // 绝对路径，无需 @ 别名
        this.config = await response.json()
        console.log(this.config.appTitle) // 输出：Vue CLI Demo
      } catch (error) {
        console.error('Failed to load config:', error)
      }
    }
  }

将 JSON 文件存放在 src/assets 目录（需动态导入）

src/assets 目录下的文件会被 webpack编译处理，可通过 ES6 的 import 语句直接导入，但需注意：assets 中的文件最终会通过 webpack 的 file-loader 或 url-loader 处理，路径会变成哈希值，因此不能直接通过 fetch 读取原始 JSON。

操作步骤：

• 存放文件：在 src/assets 下创建 JSON 文件，src/assets/data/settings.json：

  // src/assets/data/settings.json
  {
    "theme": "dark",
    "language": "zh-CN",
    "maxItems": 10
  }

• 动态导入：在组件中通过 import 导入， webpack 会将其解析为 JavaScript 对象：

  export default {
    data() {
      return {
        settings: {}
      }
    },
    async created() {
      // 使用 import 动态导入（需配合 async/await）
      const settingsModule = await import('@/assets/data/settings.json') // @ 是 src 目录别名
      this.settings = settingsModule.default // 默认导出为 JSON 对象
      console.log(this.settings.theme) // 输出：dark
    }
  }

  注意：

  • 使用 别名需确保 vue.config.js 中已配置（默认配置中 指向 src 目录）。
  • 若需在 TypeScript 中使用，需安装 @types/json5（若 JSON 文件包含注释）或通过 declare module '*.json' 扩展类型。

动态 JSON 数据的访问（API 接口）

实际开发中，多数 JSON 数据来自后端 API 接口，此时需通过 HTTP 请求库（如 axios、fetch）获取数据,并处理可能的跨域问题。

使用 axios 发起请求（推荐）

axios 是 Vue 生态中最流行的 HTTP 请求库，支持 Promise、拦截器、请求/响应拦截等功能，适合处理 API 数据。

安装 axios：

npm install axios
# 或
yarn add axios

示例代码：

import axios from 'axios'
export default {
    data() {
        return {
            users: [] // 存储从 API 获取的用户数据
        }
    },
    async created() {
        try {
            const response = await axios.get('https://jsonplaceholder.typicode.com/users') // 示例 API
            this.users = response.data
            console.log(this.users[0].name) // 输出：Leanne Graham
        } catch (error) {
            console.error('Failed to fetch users:', error)
        }
    }
}

处理跨域问题（CORS）

如果后端 API 与前端项目不同源（不同域名、端口、协议），浏览器会因同源策略（Same-Origin Policy）阻止请求,需通过以下方式解决：

后端配置 CORS（推荐）

后端在响应头中添加 Access-Control-Allow-Origin 字段，允许前端域名访问，Node.js 后端示例：

// 后端接口示例
app.get('/api/data', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080') // 允许前端域名
    res.json({ message: '跨域数据成功' })
})

Vue CLI 代理配置（开发环境）

开发时，可通过 vue.config.js 配置代理，将前端请求转发到后端接口，实现“同源”请求。

操作步骤：

• 创建/修改 vue.config.js（项目根目录）：

  module.exports = {
    devServer: {
      proxy: {
        '/api': { // 请求路径以 /api 开头时触发代理
          target: 'https://jsonplaceholder.typicode.com', // 后端真实地址
          changeOrigin: true, // 必须开启，修改请求头中的 origin
          pathRewrite: { // 可选：重写路径（去掉 /api 前缀）
            '^/api': ''
          }
        }
      }
    }
  }

• 前端请求示例：

  // 原本请求 https://jsonplaceholder.typicode.com/users
  // 现在只需请求 /api/users（开发环境会被代理到后端）
  const response = await axios.get('/api/users')

  注意：代理仅在开发环境（npm run serve）生效，生产环境需后端配置 CORS 或使用 Nginx 反向代理。

本地模拟 JSON 数据（Mock 数据）

开发阶段，后端接口可能未完成，可通过 Mock 工具（如 Mock.js）或静态 JSON 文件模拟后端响应,避免阻塞开发。

使用静态 JSON 文件模拟

将模拟数据存为 JSON 文件（如 src/mock/data.json），通过 axios 访问（需确保开发环境代理已配置，或文件在 public 目录）。

示例：

// src/mock/data.json
{
    "list": [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" }
    ]
}

组件中请求：

// 通过 @ 别名访问 src/mock 目录（需确保 webpack 能解析）
const response = await axios.get('@/mock/data.json')

使用 Mock.js 动态生成数据

Mock.js 可根据规则生成随机 JSON 数据，支持接口模拟,适合复杂场景。

安装 Mock.js：

npm install mockjs

配置 Mock 数据：

在 src/mock/index.js 中定义接口和返回数据：

import Mock from 'mockjs'
// 模拟 GET /api/users 接口，返回 10 条用户数据
Mock.mock('/api/users', 'get', {
    'code': 0,
    'message': 'success',
    'data|10': [{
        'id|+1': 1, // id 从 1 开始自增
        'name': '@name', // 随机姓名
        'email': '@email', // 随机邮箱
        'age|18-30': 25 // 18-30 随机年龄
    }]
})
// 导出 Mock 模块
export default Mock

在项目中引入 Mock：

在 src/main.js 中引入 Mock 文件（确保在 axios 之前引入，避免拦截真实请求）：

import Vue from 'vue'
import App from './App.vue'
import './mock' // 引入 Mock 配置
new Vue({
    render: h => h(App)
}).$mount('#app')

组件