国产精品免费嫩草研究院|无遮羞动漫在线观看AV|国产麻豆精品传媒AV国产在线|村在线观看|寂寞情人1正版|韩国床震韩国床震古|精品系列专区久久

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

  • 數(shù)據(jù)便捷性: Mock 數(shù)據(jù)支持以 JSON 文件的形式一鍵導(dǎo)入,一鍵導(dǎo)出 。
  • 五、接入使用Method 1: Using npm:(Recommended)
    • install msw-toolsmsw
    npm install -D msw-toolsnpm install -D msw
    • install mockServiceWorker.js 。每個腳手架生成的項目,靜態(tài)文件目錄可能不同,具體請參考:Common public directories
    npx msw init public/ --saveMethod 2: Using CDN in HTML:<body><msw-tools base="/"></msw-tools><script src="http://shimg.jingyanzongjie.com/230724/162Z95A4-1.jpg"></script></body>六、Example以 Vue3 項目為例:
    1. 在入口文件 main.js 中根據(jù)環(huán)境來動態(tài)加載
    // main.jsimport { createApp } from "vue";import router from "./router";import store from "./store";import App from "./App.vue";import "./assets/css/style.scss";const app = createApp(App);app.use(router).use(store);app.mount("#app");if (process.env.NODE_ENV === "development") {const MswTools = require("msw-tools");new MswTools();}
    1. 在根組件 App.vue 中使用 <msw-tools /> 導(dǎo)入
    <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>七、參數(shù)配置base:開發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑 。
    • 類型: string
    • 默認: /
    使用參照:
    1. 訪問 URL:https://tiven.cn,對應(yīng)的 Base:/,使用 <msw-tools base="/" />
    2. 訪問 URL:https://tiven.cn/service/,對應(yīng)的 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 文件只能放在靜態(tài)文件目錄中(/public),作為 Service Worker 服務(wù)的注冊文件,不參與打包編譯,只能以 相對路徑 的形式引用,不然 Service Worker 服務(wù)無法注冊,會導(dǎo)致請求攔截不生效 。
    2. service Worker API使用限制:只能在 https(已安轉(zhuǎn)證書)、localhost、127.0.0.1 等服務(wù)下使用,否則控制臺會出現(xiàn) [MSW] Mocking enabled (fallback mode) 日志,也就是說 http 域名服務(wù)下不可用 。
    九、演示體驗Msw-Tools 在線體驗:msw-tools
    努力一周,開源一個超好用的接口Mock工具——Msw-Tools

    文章插圖
    十、TODO
    • Msw-Tools 功能持續(xù)優(yōu)化
    • 開啟控制臺的按鈕可拖拽移動
    • 封裝 mswjs 相關(guān)API,減小打包體積
    • 規(guī)劃中...
    十一、使用反饋
    • Email: tw.email@qq.com
    • Issues: msw-tools
    歡迎廣大 Front-ender 、Tester 體驗使用,如有疑問或需求建議請到 Github Issues 提出 。
    閉門造車造輪子,過程很艱難,堅持才有收獲 。
    Thank you ?(?ω?)?
    歡迎訪問:天問博客
    【努力一周,開源一個超好用的接口Mock工具——Msw-Tools】

    經(jīng)驗總結(jié)擴展閱讀