Vue3解决Mockjs引入后并访问404(Not Found) 的页面报错问题

 更新时间:2025年04月20日 15:41:50   作者:狮子座的男孩  
mock.js:是一款模拟数据生成器,可以生成随机数据,拦截 Ajax 请求,使用mockjs模拟后端接口,可随机生成所需数据,模拟对数据的增删改查,本文给大家介绍了Vue3解决Mockjs引入后并访问404(Not Found) 的页面报错问题,需要的朋友可以参考下

1、问题描述:

其一、报错为:

GET http://localhost:5173/list 404 (Not Found)
ncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

中文为:

获取http://localhost:5173/list 404(未找到)
未捕获(承诺中)AxiosError {message:'请求失败,状态代码404',名称:'AxiosError',代码:'ERR_BAD_REQUEST',配置:{...},请求:XMLHttpRequest,...}

其二、问题描述为:
前端开发往往依赖于后端数据接口,在后端接口就绪能够返回数据之前,前端通常很难开工; Mock 功能常用于解决数据模拟问题,有了 Mock 工具模拟数据后,前后端可以同步进入开发,提升团队研发效率;因此在 vue3 项目中,引入了 Mockjs ,但在页面 报错为:GET http://localhost:5173/list 404 (Not Found)(即:在页面并没有找到自己引入 Mockjs 时,设置的地址和假数据)

其三、报错面显示为:

2、问题分析:

其一、根本问题:

根据上述的问题剖析和描述,发现:在引入 Mockjs 后,设置的数据和地址有问题;

其二、可能存在的问题:

A、是否成功引入了 Mockjs 等依赖(如:axios, vite-plugin-mock 等);

B、是否在 vite.config.js 页面里配置相关的信息;

C、是否在 mock 下的 index.js 内成功引入并使用语法;

3、问题解决:

其一、查看是否安装依赖( mockjs 和 vite-plugin-mock 以及 axios):

其二、在 vite.config.js 文件中配置 vite-plugin-mock 信息:

A、应加的 vite-plugin-mock 的代码为:

import { viteMockServe } from 'vite-plugin-mock'

 plugins: [vue(),
    viteMockServe({
      supportTs:false,
      logger: false,
      mockPath: "./mock/"   // 注意:此时的 mockPath 地址是真正安装的 mock 文件夹的地址;
    })
  ]
// 在配的 viteMockServe({}) 中属性说明:

supportTs?: boolean; --是否读取ts文件模块,设置为true时不能读取js文件
logger?:boolean; --是否在控制台显示请求日志
mockPath?: string; --设置模拟数据的存储文件夹,如果不是index.js需要写明完整路径

B、vite.config.js 文件中的代码为:

其三、在页面中成功引入并调用 Mock :

// 在页面中成功引入并调用 mock 的代码为:

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

  const list = ref([])
  
  // 发请求肯定要用到 axios, 因此需要引入 axios;
  const getList = async ()=> {
    
    const r = await axios.get('/list')  // 因为在 mock 的 index.js 里面,发现了一个不需要什么参数,get 方法,地址是 /list 的输出;
                        // 因为这个项目是:在服务器的环境下,因此可以不加域名;
                        // 因为是异步的,因此需要用 async 和 await;
    console.log(r);
  }

  // vue3 在组合式 api 的环境下,没有 created() 这个函数,因此可以直接在 setup 里面调用函数;
  getList()

</script>

4、小结:

以上就是Vue3解决Mockjs引入后并访问404(Not Found) 的页面报错问题的详细内容,更多关于Vue3 Mockjs访问404的资料请关注脚本之家其它相关文章!

相关文章

  • vue中路由跳转的多种方式(和$router下路由跳转的那几个方法的区别)

    vue中路由跳转的多种方式(和$router下路由跳转的那几个方法的区别)

    Vue.js是一款流行的前端JavaScript框架,它提供了多种方式来实现路由跳转,本文给大家分享vue中路由跳转的几种方式(和$router下路由跳转的那几个方法的区别),感兴趣的朋友一起看看吧
    2023-11-11
  • vue3+ts+elementPLus实现v-preview指令

    vue3+ts+elementPLus实现v-preview指令

    本文主要介绍了vue3+ts+elementPLus实现v-preview指令,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 使用Vue手写一个对话框

    使用Vue手写一个对话框

    相信大家之前都写过一些组件,尤其是这样的弹窗组件,这篇文章主要来和大家聊聊如何使用Vue手写一个对话框,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • Vue指令工作原理实现方法

    Vue指令工作原理实现方法

    自定义指令是 vue 中使用频率仅次于组件,其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五个生命周期钩子,接下来通过本文给大家详细介绍Vue指令工作原理实现方法,需要的朋友参考下吧
    2021-06-06
  • VUE 实现动态给对象增加属性,并触发视图更新操作示例

    VUE 实现动态给对象增加属性,并触发视图更新操作示例

    这篇文章主要介绍了VUE 实现动态给对象增加属性,并触发视图更新操作,涉及vue.js对象属性动态操作及视图更新相关实现技巧,需要的朋友可以参考下
    2019-11-11
  • vue裁切预览组件功能的实现步骤

    vue裁切预览组件功能的实现步骤

    这篇文章主要介绍了vue裁切预览组件功能的实现代码,本文通过实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • Vue中的请求拦截器和响应拦截器用法及说明

    Vue中的请求拦截器和响应拦截器用法及说明

    这篇文章主要介绍了Vue中的请求拦截器和响应拦截器用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 解决vue-loader加载不上的问题

    解决vue-loader加载不上的问题

    这篇文章主要介绍了解决vue-loader加载不上的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 如何用electron把vue项目打包为桌面应用exe文件

    如何用electron把vue项目打包为桌面应用exe文件

    这篇文章主要介绍了如何用electron把vue项目打包为桌面应用exe文件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue子组件实时获取父组件的数据实现

    vue子组件实时获取父组件的数据实现

    本文主要介绍了vue子组件实时获取父组件的数据实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12

最新评论