時常與前端合作的時候，常常 API 規格開好，不到半天前端就跟我說做好了，我想說我後端都還沒好，前端到底怎麼認定"他好了"，才知道他們有所謂的 fake api 功能，可以再呼叫不到真實 API 的情況自動替換假的 API 接上，背後就是 json 檔案而已，開發上真的很方便，我們來看看 svelte 怎麼使用吧

結果一查居然有三種 mock 方法......

1、configureServer(自己寫中介層攔截)
2、vite-plugin-mock
3、vite-plugin-mock-dev-server

本來想直接用公司前端所用的 vite-plugin-mock
但是背後有使用那個 mock js ，他已經放棄維護了，基本上是危險項目
然後上次更新 vite-plugin-mock 也是去年了，基本上我剩下 1、3 的選項
剛看 3 的文件寫的不錯，就他了，現在 vite.config.ts 變成以下了，其中 proxy 很奇怪，他 ^ api 後面隨便填都可以運作，但整個拿掉卻又沒辦法運作，害我有點搞不懂後面那個是幹嘛的，因為我就算打個 https://www.google.com，他也是會可以正常攔截

import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig, loadEnv } from 'vite';
import { mockDevServerPlugin } from 'vite-plugin-mock-dev-server';

export default defineConfig(({ mode }) => {
	const env = loadEnv(mode, process.cwd(), '');

	return {
		plugins: [tailwindcss(), sveltekit(), mockDevServerPlugin()],
		server: {
			host: '0.0.0.0',
			port: 5173,
			proxy: {
				'^/api': 'http://0.0.0.0:5174'
			}
		},
		define: {
			__BASE_URL__: JSON.stringify(env.VITE_BASE_URL)
		}
	};
});

mock 資料夾新增

import { defineMock } from 'vite-plugin-mock-dev-server';

export default defineMock({
	url: '/api/test',
	body: {
		name: 'Mark',
		age: Math.floor(Math.random() * 6) + 1
	}
});

然後隨便開個 page 測試

<script>
	/** @type {number} */
	let number = $state();

	async function roll() {
		const response = await fetch('/api/test');
		number = await response.json();
	}
</script>

<button onclick={roll}>Roll the dice</button>
{#if number !== undefined}
	<p>You rolled a {number.age}</p>
{/if}
<h1>Welcome to SvelteKit</h1>
<button class="btn btn-primary">One</button>
<button class="btn btn-secondary">Two</button>
<button class="btn btn-accent btn-outline">Three</button>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

這樣就有了

今天的情緒抒發:
今天我寫的程式出現障礙，讓 FAE 工程師跑現場了，請對方吃飯到剛剛才回到家，請問大家寫程式出問題，會請客被影響的人嗎?還是就當工作的一部分，不管呢?

因為我工作七年，因為出包會請客的人，一隻手數的出來，多數人就覺得這就是工作的一部分，可以不要做嘛

我是不是太傻了呢