Nuxt 在每次导航时硬刷新整个应用程序

Question

我用 strapi 和 nuxt js 建立了一个博客。您可以在后端创建一个 URL，前端从 URL 动态加载当前数据。当我尝试加载页面时，我的网络选项卡中出现 404 错误，但数据将被加载。

示例页面 → https://alphaoptik.net/meine-kamera

我的 nuxt 配置如下：

export default {
    ssr: true, // default value
    // Global page headers: https://go.nuxtjs.dev/config-head

    generate: {
        fallback: true
    },

    loadingIndicator: {
        name: 'folding-cube',
        color: '#E2C994'
    },

    head: {
        title: 'PageSite',
        htmlAttrs: {
            lang: 'de'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: '' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },

    // Global CSS: https://go.nuxtjs.dev/config-css
    css: [],

    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [
        { src: '~/plugins/vue-unicons', mode: 'client' }
    ],

    // Auto import components: https://go.nuxtjs.dev/config-components
    components: true,

    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
    buildModules: [
        // https://go.nuxtjs.dev/typescript
        '@nuxt/typescript-build',
        // https://go.nuxtjs.dev/tailwindcss
        '@nuxtjs/tailwindcss'
    ],

    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [
        '@nuxtjs/apollo',
        '@nuxtjs/cloudinary'
    ],
    
    target: 'static',

    apollo: {
        clientConfigs: {
            default: '@/apollo/config/config.js'
        }
    },

    cloudinary: {
        cloudName: 'cloudName'
    },

    env: {
        strapiBaseUri: process.env.API_URL || "http://localhost:1337"
    },

    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {}
}

Answer 1

正如 OP 所说，答案是用 <nuxt-link>s 替换所有 <a> 标签（+ SSR 和 apollo prefetch 在他的情况下）。

现在，这没有进行任何硬刷新并且工作正常。

Nuxt 在每次导航时硬刷新整个应用程序

Nuxt hard refreshing the whole app on each navigation

vue.js

strapi

vue-router

nuxt.js