Vue3解決Mockjs引入后并訪問404(Not Found) 的頁面報錯問題

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

mock.js:是一款模擬數(shù)據(jù)生成器,可以生成隨機數(shù)據(jù),攔截 Ajax 請求,使用mockjs模擬后端接口,可隨機生成所需數(shù)據(jù),模擬對數(shù)據(jù)的增刪改查,本文給大家介紹了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：'請求失敗，狀態(tài)代碼404'，名稱：'AxiosError'，代碼：'ERR_BAD_REQUEST'，配置：{...}，請求：XMLHttpRequest，...}

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

其三、報錯面顯示為：

2、問題分析：

其一、根本問題：

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

其二、可能存在的問題：

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

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

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

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; --設置模擬數(shù)據(jù)的存儲文件夾，如果不是index.js需要寫明完整路徑

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

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

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

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

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

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

</script>