这一章记录的是在实际开发中可能会遇到的问题
水合可以理解为服务端生成 html 结构
可以在 .env 和 nuxt.config.ts 中写环境变量
开发环境会读 .env 文件 生产环境不会，而且 .env 文件会覆盖 runtimeConfig 里面的内容。
所以 runtimeConfig 可以直接写生产环境的配置，在 .env 文件里写开发环境的配置。
//env
NUXT_PUBLIC_API_BASE='http://localhost:5600'
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
apiSecret: "", // 可以由.env文件中的 NUXT_API_SECRET 环境变量覆盖
public: {
apiBase: "" // 可以由.env文件中的 NUXT_PUBLIC_API_BASE 环境变量覆盖
}
}
});
vue 模板中，可以使用 $config.public 访问公开的运行时配置
useRuntimeConfig() , 要放在具体的方法里面。<template>
<div>
{{ $config.public }}
</div>
</template>
<script setup lang="ts">
const config = useRuntimeConfig();
console.log(config.public.apiBase);
</script>
setup 顶层、process.serve判断内onMounted 内、process.client判断内<template>
<div></div>
</template>
<script setup lang="ts">
// `setup` 顶层的代码会在服务端执行
if (process.serve) {
//服务端执行
}
if (process.client) {
//客户端执行
}
onMounted(() => {
// `onMounted` 里面的代码会在客户端执行
});
</script>
useAsyncData 搭配 $fetch$fetch// /composables/index.ts
// 获取更新记录
export const fetchRecord = () => {
const config = useRuntimeConfig();
return $fetch(`${config.public.apiBase}log/list`, {
method: "post",
body: { pageNum: 1, pageSize: 999 }
});
};
服务端请求
useAsyncData搭配$fetch
<template>
<div>{{ record }}</div>
</template>
<script lang="ts" setup>
import { fetchRecord } from "~/composables";
// useAsyncData 的第一个参数是key 有缓存作用 可以根据请求的参数动态设置 如`logs:${id.value}`
// useAsyncData 返回值里面的data是响应式的
const { data: record }: any = await useAsyncData("logs", fetchRecord);
</script>
客户端请求 直接使用
$fetch
<template>
<div>{{ record }}</div>
</template>
<script lang="ts" setup>
import { fetchRecord } from "~/composables";
const record = ref<any>();
onMounted(async () => {
const { data } = await fetchRecord();
console.log(data);
record.value = data;
});
</script>