惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - Franky
云风的 BLOG
云风的 BLOG
人人都是产品经理
人人都是产品经理
博客园 - 叶小钗
Engineering at Meta
Engineering at Meta
Vercel News
Vercel News
Y
Y Combinator Blog
B
Blog
Microsoft Azure Blog
Microsoft Azure Blog
C
Check Point Blog
M
MIT News - Artificial intelligence
Jina AI
Jina AI
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Apple Machine Learning Research
Apple Machine Learning Research
Hugging Face - Blog
Hugging Face - Blog
阮一峰的网络日志
阮一峰的网络日志
罗磊的独立博客
Stack Overflow Blog
Stack Overflow Blog
F
Fortinet All Blogs
博客园 - 司徒正美
I
InfoQ
Google DeepMind News
Google DeepMind News
GbyAI
GbyAI
U
Unit 42

Nuxt.js

nuxt3 大佬帮忙看个问题! Nuxt3 的 public 静态资源文件怎么更新 小心 Nuxt/Device 的坑 nuxt 部署在 cf Page 上 想用 env 里的环境变量 Nuxt 下大家如何做用户身份认证 nuxt 官网首页的水波效果动画是如何实现的? nuxt3 在使用 nuxt/i18n 之后打包中的依赖生成软链接的文件夹,如何让它不生成这种文件夹? 如何确定 Nuxtjs 当前的渲染模式? nuxt3 请求数据的最佳实践是什么 用 nuxtjs vue 开发的一个后台系统 后悔了 还不如用 extjs nuxt 怎么直接查询数据库然后给页面插值呢? Nuxt 能不能结合 generate 和 build 两种方式? 居然有 nuxtjs 的节点了,分享一下我的基于 nuxtjs 的博客吧
nuxt3 axios 请求出来的数据在源代码中没有这也没有办法 SEO ...
sunmoon1983 · 2024-05-27 · via Nuxt.js

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>