从 API 获取数据在本地工作，但不是实时的

Question

第一次使用 Nuxt.js 构建网站，我从一个在本地运行良好的 API 请求数据，但是当我通过 Netlify 访问该网站时，似乎没有任何代码运行。我假设这与我对静态网站工作方式的误解有关。

我要做的是检查是否有浏览器 cookie，如果没有，则创建一个并获取 API 以获取用户的大致位置，并根据纽约的一系列城市检查他们的城市。如果有匹配项，则关闭 v-banner。如果已经有浏览器 cookie，则关闭 v-banner。

缩略索引.vue：

<template>
    <v-app v-bind:class="{ alertOpen: alertOpen }">
        <v-main>
            <v-banner
                class="state-alert"
                transition="slide-y-transition"
                v-bind:class="{ alertOpen: alertOpen }"
            >
                By our calculations, it looks like you might be visiting our website from outside of New York. Unfortunately at this time, we can't sell our Granola outside of New York. If you are buying a gift for someone with a New York address then please proceed.
                <template>
                    <v-btn
                        icon
                        color="alert"
                        v-on:click="alertOpen = false"
                    >
                        <v-icon>mdi-close</v-icon>
                    </v-btn>
                </template>
            </v-banner>
        </v-main>
    </v-app>
</template>

<script>
    let nyList = ['Albany', 'Amsterdam', 'Auburn', 'Batavia', 'Beacon', 'Binghamton', 'Buffalo', 'Canandaigua', 'Cohoes', 'Corning', 'Cortland', 'Dunkirk', 'Elmira', 'Fulton', 'Geneva', 'Glen Cove', 'Glens Falls', 'Gloversville', 'Hornell', 'Hudson', 'Ithaca', 'Jamestown', 'Johnstown', 'Kingston', 'Lackawanna', 'Little Falls', 'Lockport', 'Long Beach', 'Mechanicville', 'Middletown', 'Mount Vernon', 'New Rochelle', 'New York', 'Newburgh', 'Niagara Falls', 'North Tonawanda', 'Norwich', 'Ogdensburg', 'Olean', 'Oneida', 'Oneonta', 'Oswego', 'Peekskill', 'Plattsburgh', 'Port Jervis', 'Poughkeepsie', 'Rensselaer', 'Rochester', 'Rome', 'Rye', 'Salamanca', 'Saratoga Springs', 'Schenectady', 'Sherrill', 'Syracuse', 'Tonawanda', 'Troy', 'Utica', 'Watertown', 'Watervliet', 'White Plains', 'Yonkers'];

    export default ({
        head() {
            return {
                script: [{
                    body: true
                }]
            }
        },
        data() {
            return {
                geoData: [],
                alertOpen: true
            }
        },
        async fetch() {
            const locationCookie = this.$cookies.get('location-cookie');

            if(!locationCookie) {
                console.log('no cookie');
                this.$cookies.set('location-cookie', 'true', {
                    path: '/',
                    maxAge: 31556952
                });
                this.geoData = await fetch(
                    'https://ipgeolocation.abstractapi.com/v1/?api_key=1eef312cdda9428cac26815c9d3bdd26'
                ).then(res => res.json());

                var vm = this;
                compareCity(this.geoData.city);

                function compareCity(city) {
                    var i;
                    for(i = 0; i < nyList.length; i++) {
                        if(nyList[i].toLowerCase().replace(/\s/g, '') == city.toLowerCase().replace(/\s/g, '')) {
                            console.log(city);
                            vm.alertOpen = false;
                        }
                    }
                }
            } else {
                console.log('yes cookie');
                this.alertOpen = false;
            }
        }
    });
</script>

不确定您是否还需要查看 nuxt.config.js：

export default {
    mode: "universal",

    // Global page headers (https://go.nuxtjs.dev/config-head)
    head: {
        title: 'homemade-crunch',
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: '' }
        ],
        link: [
            { rel: "preconnect", href: "https://app.snipcart.com" },
            { rel: "preconnect", href: "https://cdn.snipcart.com" },
            { rel: 'stylesheet', href: 'https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.css', defer: true },
            { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans&display=swap' }
        ],
        script: [
            { src: "https://cdn.snipcart.com/themes/v3.0/default/snipcart.js", defer: true }
        ]
    },

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

    // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
    plugins: [
        '@plugins/vuetify'
    ],

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

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

    // Modules (https://go.nuxtjs.dev/config-modules)
    modules: [
        'vue-scrollto/nuxt',
        'cookie-universal-nuxt'
    ],

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

    server: {
        port: 3333,
        host: '0.0.0.0'
    }
}

git 仓库：https://github.com/mat148/Homemade-crunch 和直播网站：https://www.homemadecrunch.com/

如果我忘记了什么或做了什么傻事，请告诉我。 任何帮助将不胜感激。 谢谢！

Answer 1

我决定将我的逻辑从 index.vue 移到一个 javascript 文件中