1. 首頁 > 生活百科 > >

努力一周，開源一個超好用的接口Mock工具——Msw-Tools( 二 )

生活百科

  1. 在根組件 App.vue 中使用 <msw-tools /> 導入
<template><msw-tools base="/" v-if="isDev" /><router-view /></template><script setup>import { ref } from "vue";const isDev = ref(process.env.NODE_ENV === "development");</script>七、參數配置base：開發或生產環境服務的公共基礎路徑 。
  • 類型： string
  • 默認： /
使用參照：
  1. 訪問 URL：https://tiven.cn，對應的 Base：/，使用 <msw-tools base="/" /> 。
  2. 訪問 URL：https://tiven.cn/service/，對應的 Base：/service/，使用 <msw-tools base="/service/" /> 。
需要與打包工具和 Router 路由的 base 保持一致 。請參考：
  • Vite 的 base 配置：Vite Base
  • Vue3 的 Router/base 路由配置：vuejs.org/zh/api/#createwebhistory" rel="external nofollow noreferrer">Vue3 Base
八、注意事項
  1. mockServiceWorker.js 文件只能放在靜態文件目錄中（/public），作為 Service Worker 服務的注冊文件，不參與打包編譯，只能以 相對路徑 的形式引用 ， 不然 Service Worker 服務無法注冊，會導致請求攔截不生效 。
  2. service Worker API使用限制：只能在 https（已安轉證書）、localhost、127.0.0.1 等服務下使用，否則控制臺會出現 [MSW] Mocking enabled (fallback mode) 日志，也就是說 http 域名服務下不可用 。
九、演示體驗Msw-Tools 在線體驗：msw-tools
【努力一周，開源一個超好用的接口Mock工具——Msw-Tools】
努力一周，開源一個超好用的接口Mock工具——Msw-Tools

文章插圖
十、TODO
  • Msw-Tools 功能持續優化
  • 開啟控制臺的按鈕可拖拽移動
  • 封裝 mswjs 相關API，減小打包體積
  • 規劃中...
十一、使用反饋
  • Email： tw.email@qq.com
  • Issues： msw-tools
歡迎廣大 Front-ender 、Tester 體驗使用，如有疑問或需求建議請到 Github Issues 提出 。
閉門造車造輪子，過程很艱難 ， 堅持才有收獲 。
Thank you ?(?ω?)?
歡迎訪問：天問博客

推薦閱讀