Nuxt错误.vue在实时服务器上无法工作。

Question

我想我有一个比较简单的问题，但我对这个问题无法理解。

复制。

Localhost: 我在layouts文件夹里做了一个error.vue，正如Nuxt所提到的那样。其文件. 当我去 localhost/this-is-a-404错误.vue文件显示为预期!本地主机的截图

实时服务器。 当我通过FTP上传我的远端(ssr)时，除了error.vue页面外，其他一切都很正常。它没有任何样式，我认为它是任何页面的默认错误页面。实时服务器上的截图。

error.vue

    <template>
    <div class="hero alternate b-white">
        <div class="container">
            <section class="columns hero-top">
                <div class="column is-7 is-offset-1">
                    <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48" id="error-icon">
                        <path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" />
                    </svg>
                    <h1 class="basic-padding-bottom-small"  v-if="error.statusCode === 404">Ooops... <br>Deze pagina bestaat niet!</h1>
                    <h1 v-else>Ooops... <br> er ging iets fout!</h1>
                    <div class="button-group ">
                        <nuxt-link to="/" class="button smoke">
                            Terug naar home
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-chevron-right">
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </nuxt-link>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'NuxtError',
        props: {
            error: {
                type: Object,
                default: null
            }
        },
        computed: {
            statusCode() {
                return (this.error && this.error.statusCode) || 500
            },
            message() {
                return this.error.message || '<%= messages.client_error %>'
            }
        },
        head() {
            return {
                title: this.message,
                meta: [{
                    name: 'viewport',
                    content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0'
                }]
            }
        }
    }

</script>

<style lang="scss">
    @import "assets/scss/app.scss";

    #error-icon{
        margin-bottom: 40px;
    }

</style>

我是不是遗漏了什么？

先谢谢你！亚伦

Answer 1

试着将以下内容添加到你的 nuxt.config.js:

generate: {
  fallback: true
}

这里有关于这个的最新解释。如何在Netlify上部署 页面。即使你没有部署在Netlify上，问题也可能是一样的。

对于一个单页应用来说，有一个刷新的问题，因为默认情况下在netlify上网站会重定向到 "找不到404". 对于任何没有生成的页面，他们会退回到SPA模式，然后如果你刷新或分享该链接，你会得到Netlify的404页面。这是因为没有生成的页面实际上并不存在，因为它们实际上是一个单一的页面应用程序，所以如果你重新刷新这个页面，你会得到一个404，因为该页面的url实际上并不存在。通过重定向到404.html，Nuxt将在SPA回退中正确地重新加载你的页面。

最简单的方法是在nuxt.config中添加一个generate属性，并设置fallback：true。这样在SPA模式下就会回退到生成的404.html，而不是Netlify的404页面。

---

另外，我不会通过FTP上传我的dist文件夹，因为那只会把生成的东西放到你的服务器上。任何动态的东西都不会在那里。

我建议把整个应用程序放在服务器上，最好是有一个版本控制（git）。另外，如果你有一个内置的管道，你总是自动部署某个分支，这将使你的生活更容易。