nuxt.config.ts 中的 ssr 也是 true
自己写的后台接口
页面显示正常的,但是右键, 查看源代码后里面没有请求回来的数据呀!
这能 SEO ?
nuxt.config.ts 代码:
export default defineNuxConfig({ app: { head: { charset: 'utf-8', viewport: 'width=device-width, initial-scale=1', } }, devtools: {enabled: false}, //关闭遥测数据 telemetry: false, modules: ['@pinia/nuxt'], css: [ "@/assets/style/style.css" //配置使用的样式 ], ssr:true, })
页面代码:
<template> <div id="body"> <div class="container"> <div id="main"> <article class="post" v-if="_length(row)>0"> <h1 class="center">{{row.title}}</h1> <ul class="post-meta"> <li> <time>{{dateDisplay(row.created_at)}}</time> </li> <li><a :href="row.url">默认分类</a> </li> <li><a>{{row.views}}</a> 阅读</li> <li><a href="#comments">评论</a></li> </ul> <div class="post-content" v-html="row.content"></div> <p class="tags">标签: <a v-for="tag in row.tag" :href="getTagUrl(tag)">{{tag}}</a></p> <div class="post-near"> <li class="post-left">没有了</li> <li class="post-right">没有了</li> </div> <div class="clearfix"></div> </article> </div> </div> </div> </template> <script setup lang="ts"> import {onMounted,ref} from "vue"; import {getArticleDetail} from "~/api/article"; import type {ApiResponse,ArticleItem} from "~/types/interface"; import {dateDisplay} from "~/utils/date"; import {_length} from "~/utils"; import { useRoute } from '#app'; const route = useRoute(); const params = route.params; const id = ref(params.id); const loading = ref(false); const row = ref<ArticleItem>(); onMounted(async()=>{ await fetchData(); }) const fetchData = async() =>{ try { loading.value = true; const data:ApiRespOnse= await getArticleDetail({id:id.value}); if(data.code!==0){ return Promise.reject(data.message); } row.value = data.data as ArticleItem; if(_length(row.value.url)===0){ row.value.url = '/archives/'+row.value.slug; } useHead({ title: row.value.title, meta: [ { name: 'description', content: '我的神奇网站。' } ], bodyAttrs: { class: 'test' }, script: [ { innerHTML: 'console.log(\'Hello world\')' } ] }) }catch (e) { loading.value = false; } } </script> <style scoped lang="less"> </style>
![]() | 1 dumbass 2024-05-27 17:39:30 +08:00 你的数据是组件 mount 后接口请求的,查看源码当然没有啊 |
![]() | 2 shengkai 2024-05-27 17:43:39 +08:00 请使用 useAsyncData 或 useFetch ,官网文档( https://nuxt.com.cn/docs/getting-started/data-fetching)还是很清晰的…SSR 的数据获取后水合跟前端获取是不太一样的,你的逻辑是纯前端逻辑… |
3 kingwrcy 2024-05-27 17:44:18 +08:00 直接使用 useFetch 在 setup 里面,不要包在 onMounted 里面 |
![]() | 4 sunmoon1983 OP |
5 kingwrcy 2024-05-28 13:29:15 +08:00 你都用 Nuxt SSR 了,为什么不遵循官方文档呢?官方推荐使用 useFetch,你使用 axios 还要单独再引入个 axios 图啥呢? |
![]() | 6 shengkai 2024-05-28 13:37:17 +08:00 @sunmoon1983 非要用 axios 也不是不行啊~但是你得在 axios 外面套一层 useAsyncData, 比如: const data = await useAsyncData('data', () => returen axios.get(url)) 研究下官方文档吧,感觉问题都很基础的,看下文档就能解决的… |
![]() | 7 sunmoon1983 OP @shengkai 嗯,谢谢,我去啃文档了 |