1、问题描述：

其一、报错为：

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

复制代码

中文为：

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

复制代码

其二、问题描述为：
前端开发往往依赖于后端数据接口，在后端接口就绪能够返回数据之前，前端通常很难开工;

1. Mock

复制代码

功能常用于解决数据模拟问题，有了 Mock 工具模拟数据后，前后端可以同步进入开发，提升团队研发效率；因此在

1. vue3

复制代码

项目中，引入了

1. Mockjs

复制代码

,但在页面 报错为：

1. 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、问题解决：

其一、查看是否安装依赖(

1. mockjs

复制代码

和

1. vite-plugin-mock

复制代码

以及

1. axios

复制代码

)：

其二、在

1. vite.config.js

复制代码

文件中配置

1. vite-plugin-mock

复制代码

信息:
A、应加的

1. vite-plugin-mock

复制代码

的代码为：

1. import { viteMockServe } from 'vite-plugin-mock'
   
2. 
   
3. plugins: [vue(),
   
4.     viteMockServe({
   
5.       supportTs:false,
   
6.       logger: false,
   
7.       mockPath: "./mock/"   // 注意：此时的 mockPath 地址是真正安装的 mock 文件夹的地址;
   
8.     })
   
9.   ]

复制代码

1. // 在配的 viteMockServe({}) 中属性说明：
   
2. 
   
3. supportTs?: boolean; --是否读取ts文件模块，设置为true时不能读取js文件
   
4. logger?:boolean; --是否在控制台显示请求日志
   
5. mockPath?: string; --设置模拟数据的存储文件夹，如果不是index.js需要写明完整路径

复制代码

B、

1. vite.config.js

复制代码

文件中的代码为：

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

1. // 在页面中成功引入并调用 mock 的代码为：
   
2. 
   
3. <script setup>
   
4.   
   
5.   import { ref } from 'vue'
   
6.   import axios from 'axios'
   
7. 
   
8.   const list = ref([])
   
9.   
   
10.   // 发请求肯定要用到 axios, 因此需要引入 axios;
    
11.   const getList = async ()=> {
    
12.    
    
13.     const r = await axios.get('/list')  // 因为在 mock 的 index.js 里面，发现了一个不需要什么参数，get 方法，地址是 /list 的输出；
    
14.                         // 因为这个项目是：在服务器的环境下，因此可以不加域名；
    
15.                         // 因为是异步的，因此需要用 async 和 await;
    
16.     console.log(r);
    
17.   }
    
18. 
    
19.   // vue3 在组合式 api 的环境下，没有 created() 这个函数，因此可以直接在 setup 里面调用函数；
    
20.   getList()
    
21. 
    
22. </script>

复制代码

4、小结：

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

来源：https://www.jb51.net/javascript/3399849us.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！