快捷導(dǎo)航

Vue3解決Mockjs引入后并訪問(wèn)404(Not Found) 的頁(yè)面報(bào)錯(cuò)問(wèn)題

更新時(shí)間：2025年04月20日 15:41:50 作者：獅子座的男孩

mock.js:是一款模擬數(shù)據(jù)生成器,可以生成隨機(jī)數(shù)據(jù),攔截 Ajax 請(qǐng)求,使用mockjs模擬后端接口,可隨機(jī)生成所需數(shù)據(jù),模擬對(duì)數(shù)據(jù)的增刪改查,本文給大家介紹了Vue3解決Mockjs引入后并訪問(wèn)404(Not Found) 的頁(yè)面報(bào)錯(cuò)問(wèn)題,需要的朋友可以參考下

1、問(wèn)題描述：

其一、報(bào)錯(cuò)為：

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：'請(qǐng)求失敗，狀態(tài)代碼404'，名稱：'AxiosError'，代碼：'ERR_BAD_REQUEST'，配置：{...}，請(qǐng)求：XMLHttpRequest，...}

其二、問(wèn)題描述為：
前端開發(fā)往往依賴于后端數(shù)據(jù)接口，在后端接口就緒能夠返回?cái)?shù)據(jù)之前，前端通常很難開工; Mock 功能常用于解決數(shù)據(jù)模擬問(wèn)題，有了 Mock 工具模擬數(shù)據(jù)后，前后端可以同步進(jìn)入開發(fā)，提升團(tuán)隊(duì)研發(fā)效率；因此在 vue3 項(xiàng)目中，引入了 Mockjs ,但在頁(yè)面報(bào)錯(cuò)為：GET http://localhost:5173/list 404 (Not Found)(即：在頁(yè)面并沒有找到自己引入 Mockjs 時(shí)，設(shè)置的地址和假數(shù)據(jù))

其三、報(bào)錯(cuò)面顯示為：

2、問(wèn)題分析：

其一、根本問(wèn)題：

根據(jù)上述的問(wèn)題剖析和描述，發(fā)現(xiàn)：在引入 Mockjs 后，設(shè)置的數(shù)據(jù)和地址有問(wèn)題；

其二、可能存在的問(wèn)題：

A、是否成功引入了 Mockjs 等依賴(如：axios, vite-plugin-mock 等)；

B、是否在 vite.config.js 頁(yè)面里配置相關(guān)的信息;

C、是否在 mock 下的 index.js 內(nèi)成功引入并使用語(yǔ)法；

3、問(wèn)題解決：

其一、查看是否安裝依賴( mockjs 和 vite-plugin-mock 以及 axios)：

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

A、應(yīng)加的 vite-plugin-mock 的代碼為：

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

 plugins: [vue(),
    viteMockServe({
      supportTs:false,
      logger: false,
      mockPath: "./mock/"   // 注意：此時(shí)的 mockPath 地址是真正安裝的 mock 文件夾的地址;
    })
  ]

// 在配的 viteMockServe({}) 中屬性說(shuō)明：

supportTs?: boolean; --是否讀取ts文件模塊，設(shè)置為true時(shí)不能讀取js文件
logger?:boolean; --是否在控制臺(tái)顯示請(qǐng)求日志
mockPath?: string; --設(shè)置模擬數(shù)據(jù)的存儲(chǔ)文件夾，如果不是index.js需要寫明完整路徑

B、vite.config.js 文件中的代碼為：

其三、在頁(yè)面中成功引入并調(diào)用 Mock ：

// 在頁(yè)面中成功引入并調(diào)用 mock 的代碼為：

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

  const list = ref([])
  
  // 發(fā)請(qǐng)求肯定要用到 axios, 因此需要引入 axios;
  const getList = async ()=> {
    
    const r = await axios.get('/list')  // 因?yàn)樵?mock 的 index.js 里面，發(fā)現(xiàn)了一個(gè)不需要什么參數(shù)，get 方法，地址是 /list 的輸出；
                        // 因?yàn)檫@個(gè)項(xiàng)目是：在服務(wù)器的環(huán)境下，因此可以不加域名；
                        // 因?yàn)槭钱惒降?，因此需要?async 和 await;
    console.log(r);
  }

  // vue3 在組合式 api 的環(huán)境下，沒有 created() 這個(gè)函數(shù)，因此可以直接在 setup 里面調(diào)用函數(shù)；
  getList()

</script>