nuxt.config.ts 中的 ssr 也是 true
自己写的后台接口
页面显示正常的,但是右键, 查看源代码后里面没有请求回来的数据呀!
这能 SEO ?
nuxt.config.ts 代码:
export default defineNuxtConfig({
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
bojackhorseman 184 天前
你的数据是组件 mount 后接口请求的,查看源码当然没有啊
|
2
shengkai 184 天前
请使用 useAsyncData 或 useFetch ,官网文档( https://nuxt.com.cn/docs/getting-started/data-fetching)还是很清晰的…SSR 的数据获取后水合跟前端获取是不太一样的,你的逻辑是纯前端逻辑…
|
3
kingwrcy 184 天前
直接使用 useFetch 在 setup 里面,不要包在 onMounted 里面
|
4
sunmoon1983 OP |
5
kingwrcy 184 天前
你都用 Nuxt SSR 了,为什么不遵循官方文档呢?官方推荐使用 useFetch,你使用 axios 还要单独再引入个 axios
图啥呢? |
6
shengkai 183 天前
@sunmoon1983 非要用 axios 也不是不行啊~但是你得在 axios 外面套一层 useAsyncData, 比如:
const data = await useAsyncData('data', () => returen axios.get(url)) 研究下官方文档吧,感觉问题都很基础的,看下文档就能解决的… |
7
sunmoon1983 OP @shengkai 嗯,谢谢,我去啃文档了
|