vite创建VUE3项目如何使用mockjs来mock数据

原创已于 2025-02-07 14:57:37 修改 · 299 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

于 2025-02-07 14:53:09 首次发布

1.下载mockjs依赖

npm install mockjs --save-dev
yarn add mockjs --dev

2.在src下创建mock文件夹，并在此文件夹下创建modules文件夹和index.js文件，在modules里创建user.js

user.js

// src/mock/modules/user.js
import { Random } from "mockjs";

function login(req) {
  return {
    code: 200,
    data: {
      // username: Random.cname(),
      // token: Random.guid(),
      message: "Login successfully.",
    },
  };
}

function logout(req) {
  return {
    code: 200,
    data: {
      message: "Logout successfully.",
    },
  };
}

export default {
  login,
  logout,
};

在index.js中

import Mock from "mockjs";
import user from "./modules/user";

Mock.mock("/api/user/login", "post", user.login);

3.封装axios，创建api文件夹

api->request.js

import axios from "axios";

// 创建 axios 实例

const instance = axios.create({

  baseURL: import.meta.env.VITE_API_URL, // 设置请求的基本 URL

  // baseURL: "/api",

  timeout: 10000, // 设置请求超时时间

  //   headers: {'X-Custom-Header': 'foobar'}

});

api->api.js

import request from "./request";
export function login(data) {
  return request({
    method: "post",
    url: "/api/user/login",
    data,
  });
}

3.在vite.config.js中（看需求配置）

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const BaseURL = "http://localhost:5173" || process.env.VITE_API_URL;

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/api": {
        target: BaseURL,
        changeOrigin: true, // 是否跨域
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  resolve: {
    alias: {
      "@": "/src", // 将 @ 映射到 src 目录
    },
  },
});

4.更改本地环境变量

.env.locals文件