Vue3 + Vite本地模拟数据（读取 JSON 数据）

1. Vue3 + Vite本地模拟数据（读取 JSON 数据）

1.1. 两种场景

1. JSON 放在 public 文件夹：模拟后端接口，打包后可直接修改 json 文件，不用重新打包（适合静态模拟数据）
2. JSON 放在 src 内部：直接 import 导入，编译打包进代码，适合固定常量数据

管理系统常用：用 public 下 json 模拟接口返回格式，和真实后端返回结构保持一致，方便后期切换真实接口。

1.2. 目录结构

├── public
│   └── mock
│       └── userList.json   #模拟接口返回数据
├── src
│   ├── api
│   │   └── user.js         #封装请求函数
│   ├── views
│   │   └── user/index.vue  #页面组件

public/mock/userList.json

{
  "code": 200,
  "msg": "查询成功",
  "data": {
    "total": 2,
    "records": [
      {"id":1,"username":"admin","nickName":"管理员","status":1},
      {"id":2,"username":"test","nickName":"测试用户","status":0}
    ]
  }
}

1.3. 方式一：axios 封装读取 public json（项目推荐，模拟接口）

1.3.1. src/api/user.js

import request from '@/utils/request'

// 获取用户列表，public下mock json
export function getUserList() {
  // public路径直接 /mock/userList.json
  return request({
    url: '/mock/userList.json',
    method: 'get'
  })
}

⚠️注意：这里只是读取本地 json，不会带上 post 请求体，只能 get。真实后端才支持 post。

1.3.2. 页面 views/user/index.vue

<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="username" label="账号"/>
      <el-table-column prop="nickName" label="昵称"/>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserList } from '@/api/user'

const tableData = ref([])

const loadData = async () => {
  const res = await getUserList()
  // 和后端返回格式对齐 res.code res.data
  if(res.code === 200){
    tableData.value = res.data.records
  }
}

onMounted(()=>{
  loadData()
})
</script>

1.4. 方式二：src 内部 json 直接 import（固定常量，不做 mock 接口）

新建 src/assets/user.json

[
  {"id":1,"username":"admin"}
]

页面直接导入

import userData from '@/assets/user.json'
console.log(userData)

缺点：打包后编译进 js，改 json 必须重新打包部署，不能线上直接改文件。

1.5. 适配二级部署路径（vite.config.ts）

如果后台系统部署在 /admin 二级目录

import { defineConfig } from 'vite'
export default defineConfig({
  base: '/admin/'
})

request 工具里 url 拼接import.meta.env.BASE_URL

url: import.meta.env.BASE_URL + 'mock/userList.json'

开发环境 vs 打包 dist

• 开发：浏览器访问 http://localhost:5173/mock/userList.json 直接看到 json
• 打包后 dist：dist/mock/userList.json，线上地址 域名/mock/userList.json

优点：线上服务器直接修改这个 json 文件，刷新页面就生效，不需要重新构建项目。

1.6.重要坑点（管理系统高频踩坑）

1. public 下 json只能 GET 请求，不能 post、put；模拟 post 接口不能用本地 json 文件。
2. 不要写相对路径 ../mock/xxx.json，统一以 / 开头。
3. 不要 import public 下面的 json，会报模块找不到，public 资源是网络请求。
4. json 文件格式严格，不能有注释，有注释会读取报错。

1.7. 如何无缝切换本地 json 模拟 和 真实后端接口

若依思路：环境变量控制

.env.development

VITE_API_BASE_URL = ''

.env.production

VITE_API_BASE_URL = '/api'

api/user.js

export function getUserList() {
  return request({
    // 开发环境读取本地mock json；生产请求后端接口
    url: import.meta.env.DEV ? '/mock/userList.json' : '/system/user/list',
    method: 'get'
  })

开发读本地 json，打包后自动请求真实后端接口。

2. 拓展

2.1. 方案一：直接导入 JSON 文件（简单，适合静态数据，没有网络请求，只是 js 读取）

Vite 天然支持直接 import json，会把 json 转成 js 对象。

1. 在src下面新建文件夹 mock，新建 user.json
src/mock/user.json

[
  {
    "id": 1,
    "name": "张三",
    "age": 20
  },
  {
    "id": 2,
    "name": "李四",
    "age": 22
  }
]

2. vue 组件中直接导入使用

<script setup>
// 直接导入json
import userList from '@/mock/user.json'

console.log(userList)
</script>

<template>
  <div>
    <div v-for="item in userList" :key="item.id">{{ item.name }}</div>
  </div>
</template>

⚠️缺点：不是 ajax 请求，是编译时直接把 json 打包进 js，不能用 axios/fetch 去请求这个文件路径。适合纯静态展示。

---

2.2. 方案二：public 目录 + fetch/axios（模拟 http 接口请求，推荐）

public 文件夹下的资源会直接作为静态资源，浏览器可以通过 http 请求访问，就像请求后端接口。

1. 在项目根目录找到public文件夹，新建api文件夹，新建user.json
public/api/user.json

{
  "code": 200,
  "msg": "成功",
  "data": [
    {
      "id": 1,
      "name": "张三",
      "age": 20
    },
    {
      "id": 2,
      "name": "李四",
      "age": 22
    }
  ]
}

2. 组件中用 fetch /axios 请求 '/api/user.json'

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const list = ref([])

// fetch原生请求
const getMockData = async () => {
  // public下面直接 /api/xxx.json
  const res = await fetch('/api/user.json')
  const result = await res.json()
  console.log(result)
  list.value = result.data
}

// axios版本
const getAxiosData = async () => {
  const res = await axios.get('/api/user.json')
  list.value = res.data.data
}

onMounted(() => {
  getMockData()
})
</script>

<template>
  <div v-for="item in list" :key="item.id">
    {{ item.name }}
  </div>
</template>

访问地址：开发环境 http://localhost:5173/api/user.json，浏览器直接打开这个地址就能看到 json。

✅优点：真实 http 请求，和调用后端接口写法完全一致，后期替换成后端 url 只需要改地址。

⚠️缺点：不支持 get 传参、post 请求，只能返回固定 json。如果需要模拟 post、动态参数。