vite+vue3+ts使用mockjs

1.下载mockjs

npm install mockjs --save-dev

2.下载vite-plugin-mock

npm i vite-plugin-mock cross-env -D

3. package.json中修改dev的环境变量

"scripts": {
    "dev": "cross-env NODE_ENV=development vite",
  },

4.vite.config.ts中配置mockjs

import { viteMockServe } from "vite-plugin-mock";
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      supportTs: true, 
    }),

  ],

5.根目录中创建mock文件夹/users.ts(根据需求语义化) 里面配置参数规则 更多的功能应用可以参考mockjs官网

//模拟返回10条用户信息
export default [
  {
    url: "/api/getUsers", //匹配到指定url 
    method: "get",        //请求类型
    response: () => {
      return {
        code: 0,
        message: "ok",
        data: {          //需要返回的参数
          "list|10": [   
            {
              id: "@natural(100,200)", //100-200之间的随机整数
              
              city: "@county(true)",   //随机省市区
              
              "moblie|1": [            //数组中的号码随机返回一个
                "13531544954",
                "13632250649",
                "15820292420",
                "15999905612",
              ],
              name: "@cname",          //随机返回名字
              state: "@integer(0,1)",  //随机返回0/1(用户性别)

              "company|1": [           //与手机号码同理
                "广州某有限公司",
                "深圳某有限公司",
                "佛山某有限公司",
                "惠州某有限公司",
              ],

              "address|1": [
                "中山路3号",
                "教育路10号",
                "民兴路9号",
                "北京路23号",
              ],
            },
          ],
        },
      };
    },
  },
];

6.请求mockjs中的数据

onMounted(() => {
  //实际开发过程中建议对api进行封装 搭配async/await使用
  axios
    .get(`/api/getUsers`)
    .then((res) => {
     console.log("res  ----->  ", res.data.data);
    })
    .catch((err) => {
      console.log(err);
    });

});