V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sunmoon1983
V2EX  ›  Nuxt.js

nuxt3 axios 请求出来的数据在源代码中没有这也没有办法 SEO 呀?

  •  
  •   sunmoon1983 · 184 天前 · 1262 次点击
    这是一个创建于 184 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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>
    
    
    7 条回复    2024-05-28 15:24:14 +08:00
    bojackhorseman
        1
    bojackhorseman  
       184 天前
    你的数据是组件 mount 后接口请求的,查看源码当然没有啊
    shengkai
        2
    shengkai  
       184 天前
    请使用 useAsyncData 或 useFetch ,官网文档( https://nuxt.com.cn/docs/getting-started/data-fetching)还是很清晰的…SSR 的数据获取后水合跟前端获取是不太一样的,你的逻辑是纯前端逻辑…
    kingwrcy
        3
    kingwrcy  
       184 天前
    直接使用 useFetch 在 setup 里面,不要包在 onMounted 里面
    sunmoon1983
        4
    sunmoon1983  
    OP
       184 天前
    @bojackhorseman
    @shengkai
    @kingwrcy
    只能用 useFetch 吗? axios 不行?
    kingwrcy
        5
    kingwrcy  
       184 天前
    你都用 Nuxt SSR 了,为什么不遵循官方文档呢?官方推荐使用 useFetch,你使用 axios 还要单独再引入个 axios

    图啥呢?
    shengkai
        6
    shengkai  
       183 天前
    @sunmoon1983 非要用 axios 也不是不行啊~但是你得在 axios 外面套一层 useAsyncData, 比如:

    const data = await useAsyncData('data', () => returen axios.get(url))

    研究下官方文档吧,感觉问题都很基础的,看下文档就能解决的…
    sunmoon1983
        7
    sunmoon1983  
    OP
       183 天前
    @shengkai 嗯,谢谢,我去啃文档了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4709 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 05:37 · PVG 13:37 · LAX 21:37 · JFK 00:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.