Nuxt应用本地开发服务器不断重载

Question

我有一个 Nuxt ^2.15.8 应用程序，它在我运行 yarn dev.

之后不断重新加载

控制台会显示类似↻ Updated 1647868577626的消息，然后应用程序被重建，就好像我只是运行yarn dev一样。这种情况不断发生，而我没有对代码进行任何更改。

我用谷歌搜索了一下，发现像 gitkraken 这样的应用程序可能正在修改 .git 文件夹的内容，这可能会触发重新加载。

所以我让 gitkraken 关闭。

我还将这些行添加到我的 nuxt.config.js 文件中：

watchers: {
  webpack: {
    ignored: [
      '**/*.{md,log,prettierignore,prettierrc,stylelintignore,npmrc,gitignore}',
      '**/.git/**',
    ],
  },
},

虽然这并不能解决问题

我的主要问题是：↻ Updated 1647868577626 行是什么意思，可能是什么原因造成的？我觉得如果我想解决我的问题，我需要回答那个问题。

编辑：这是我的完整 nuxt.config.js 文件

import fs from 'fs'
import path from 'path'

// TODO Migrate from dotenv to runtime config https://nuxtjs.org/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config/
import { config } from 'dotenv'

config()

// eslint-disable-next-line import/first
import { exportSitePayload, getSitePayload } from './scripts/prepare-for-build'
// eslint-disable-next-line import/first

process.env.NUXT_TARGET_MODE
  = process.env.NUXT_TARGET_MODE || (process.env.NETLIFY ? 'static' : 'server')

const isProd
  = /prod/i.test(process.env.NODE_ENV)
  || process.env.NETLIFY
  || (process.env.HEROKU && process.env.PP_ENV === 'production')
const isStaging
  = !isProd
  && (/stag/i.test(process.env.NODE_ENV) || (process.env.HEROKU && process.env.PP_ENV === 'staging'))
const isDev = !(isProd || isStaging)

export default async function() {
  await exportSitePayload({
    ...(process.env.STATIC_HOST ? { staticHost: process.env.STATIC_HOST } : {}),
    ...(process.env.HEROKU ? { all: true } : {}),
  })
  return {
    ssr: process.env.SSR !== 'false',
    target: process.env.NUXT_TARGET_MODE,
    components: [
      { path: '~/components/', pathPrefix: false },
      { path: '~/components', pathPrefix: true, level: 1 },
    ],
    env: {
      SANITY_PROJECT_ID: process.env.SANITY_PROJECT_ID,
      SANITY_PROJECT_DATASET: process.env.SANITY_PROJECT_DATASET,
    },
    publicRuntimeConfig: {
      apiBaseURL: process.env.API_BASE_URL,
      forceAPIBaseURL: process.env.FORCE_API_BASE_URL,
      ppEnv: process.env.PP_ENV,
      archivedMode: process.env.ARCHIVED_MODE,
      archivedModeLiveLink: process.env.ARCHIVED_MODE_LIVE_LINK,
      attendeeAPILinkedInCallback: process.env.ACCOUNT_ENDPOINT_LINKEDIN_CALLBACK,
      attendeeAPILogout: process.env.ACCOUNT_ENDPOINT_LOGOUT,
      attendeeAPIVerifyLogincode: process.env.ACCOUNT_ENDPOINT_VERIFY_LOGINCODE,
      attendeeAPIMagicLinkRequest: process.env.ACCOUNT_ENDPOINT_MAGIC_LINK_REQUEST,
      attendeeAPIRegister: process.env.ACCOUNT_ENDPOINT_REGISTER,
      attendeeAPIUserInfo: process.env.ACCOUNT_ENDPOINT_USER_INFO,
      devDisableCache: process.env.DEV_DISABLE_CACHE,
      eventAPIDetails: process.env.EVENT_ENDPOINT_DETAILS,
      eventAPIBadge: process.env.EVENT_ENDPOINT_BADGE,
      liveEventAPIStage: process.env.LIVE_EVENT_ENDPOINT_STAGE,
      liveEventAPIChat: process.env.LIVE_EVENT_ENDPOINT_CHAT,
      orderAPICustomer: process.env.ORDER_ENDPOINT_CUSTOMER,
      orderAPICart: process.env.ORDER_ENDPOINT_CART,
      orderAPIInfo: process.env.ORDER_ENDPOINT_INFO,
      orderAPIInvoice: process.env.ORDER_ENDPOINT_INVOICE,
      paymentAPIMethods: process.env.PAYMENT_API_METHODS,
      productAPIInfo: process.env.PRODUCT_ENDPOINT_INFO,
      staticHost: process.env.STATIC_HOST,
      streamChatAPIKey: process.env.STREAM_CHAT_API_KEY,
      streamChatAPPId: process.env.STREAM_CHAT_APP_ID,
      ticketAPIDetails: process.env.TICKET_ENDPOINT_DETAILS,
      ticketAPIList: process.env.TICKET_ENDPOINT_LIST,
      userAPIOrders: process.env.USER_ENDPOINT_ORDERS,
      videoAPIDetails: process.env.VIDEO_API_ENDPOINT_DETAILS,
      videoAPILists: process.env.VIDEO_API_ENDPOINT_LISTS,
      videoAPIUploadInfo: process.env.VIDEO_API_ENDPOINT_UPLOAD_INFO,
      isProd,
      isStaging,
      isDev,
    },
    /*
     ** Headers of the page
     */
    head: {
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        {
          hid: 'viewport',
          name: 'viewport',
          content: 'width=device-width, initial-scale=1',
        },
      ],
      link: [
        { rel: 'stylesheet', href: 'https://use.typekit.net/fag0imi.css' },
        { rel: 'stylesheet', href: '/theme.css' },
        { rel: 'stylesheet', href: '/static_theme.css' },
      ],
    },
    /*
     ** Customize the progress-bar color
     */
    loading: { color: 'var(--color-primary-500)' },
    /*
     ** Global CSS
     */
    css: [],
    /*
     ** Plugins to load before mounting the App
     */
    plugins: [
      '~/plugins/vuelidate.js',
      '~/plugins/filters.js',
      '~/plugins/lazyload.js',
      '~/plugins/reactive-provide.js',
      '~/plugins/vue-form-wizard',
      '~/plugins/vue-phone-number-input',
      '~/plugins/vue-selectize',
      '~/plugins/sanity-block-vue-component.js',
      '~/plugins/youtube.client.js',
      '~/plugins/v-tooltip.js',
      '~/plugins/axios.js',
      { src: 'plugins/vue-typer.client.js', ssr: false },
    ],
    /*
     ** Nuxt.js dev-modules
     */
    buildModules: [
      '@nuxt/postcss8',
      // https://typescript.nuxtjs.org/
      '@nuxt/typescript-build',
      // https://composition-api.nuxtjs.org/getting-started/setup
      '@nuxtjs/composition-api/module',
      // Doc: https://github.com/nuxt-community/eslint-module
      '@nuxtjs/eslint-module',
      // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
      '@nuxtjs/tailwindcss',
      '@nuxtjs/dotenv',
    ],
    /*
     ** Nuxt.js modules
     */
    modules: [
      '@nuxtjs/axios',
      [
        '@nuxtjs/pwa',
        {
          manifest: false,
          icon: false,
          workbox: {
            runtimeCaching: [
              {
                urlPattern: 'https://a.storyblok.com/.*',
                handler: 'CacheFirst',
              },
              {
                urlPattern: 'https://img2.storyblok.com/.*',
                handler: 'CacheFirst',
              },
              {
                urlPattern: 'https://cdn.sanity.io/.*',
                handler: 'CacheFirst',
              },
            ],
          },
        },
      ],
      [
        'storyblok-nuxt',
        {
          accessToken: process.env.STORYBLOK_ACCESS_TOKEN,
          cacheProvider: 'memory',
        },
      ],
      'nuxt-webfontloader',
      'portal-vue/nuxt',
      '@nuxtjs/proxy',
      '@nuxtjs/sentry',
    ],

    ...(isProd || isStaging
      ? {
        sentry: {
          dsn: process.env.SENTRY_DNS, // Enter your project's DSN here
          // Additional Module Options go here
          // https://sentry.nuxtjs.org/sentry/options
          tracing: {
            tracesSampleRate: isProd ? 0.2 : 1.0,
            vueOptions: {
              tracing: true,
              tracingOptions: {
                hooks: ['mount', 'update'],
                timeout: 2000,
                trackComponents: true,
              },
            },
            browserOptions: {},
          },
          config: {
            // Add native Sentry config here
            // https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/
            environment: isProd ? 'production' : 'staging',
            debug: !isProd,
          },
        },
      }
      : {}),

    ...(!/prod/i.test(process.env.NODE_ENV) && !process.env.NETLIFY
      ? {
        proxy: {
          '/.netlify/functions': {
            target: process.env.API_ORIGIN,
          },
        },
      }
      : {}),

    ...(/prod/i.test(process.env.NODE_ENV) || process.env.NETLIFY || process.env.HEROKU
      ? {}
      : {
        server: {
          https: {
            key: fs.readFileSync(path.resolve(__dirname, '.tls/key.pem')),
            cert: fs.readFileSync(path.resolve(__dirname, '.tls/cert.pem')),
          },
        },
      }),

    axios: {
      credentials: true,
      baseURL: process.env.API_BASE_URL,
    },
    auth: {
      cookie: {
        cookie: {
          name: 'frontend_love_account_state',
        },
        token: {
          required: false,
          type: false,
        },
        user: {
          property: '',
        },
        endpoints: {
          login: {
            url: process.env.ACCOUNT_ENDPOINT_MAGIC_LINK_REQUEST,
            method: 'post',
          },
          logout: { url: process.env.ACCOUNT_ENDPOINT_LOGOUT, method: 'post' },
          user: { url: process.env.ACCOUNT_ENDPOINT_USER_INFO, method: 'get' },
        },
      },
      loginCode: {
        scheme: 'local',
        token: {
          required: false,
          type: false,
        },
        endpoints: {
          login: {
            url: process.env.ACCOUNT_ENDPOINT_VERIFY_LOGINCODE,
            method: 'post',
          },
          user: { url: process.env.ACCOUNT_ENDPOINT_USER_INFO, method: 'get' },
        },
        user: {
          property: false,
          autoFetch: false,
        },
      },
      plugins: ['~/plugins/auth.js'],
    },
    /*
     ** nuxt-webfontloader Options
     */
    webfontloader: {
      google: {
        families: ['Merriweather:300,400,700', 'Rubik:300,400,500', 'Odibee+Sans'],
      },
    },
    /*
     ** Build configuration
     */
    build: {
      quiet: false,
      /*
       ** You can extend webpack config here
       */
      extend(config, ctx) {
        config.resolve.alias.vue = 'vue/dist/vue.common'
        if (ctx.isDev)
          config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      },
      postcss: {
        plugins: {
          'postcss-import': {},
          'tailwindcss/nesting': {},
          'tailwindcss': {},
          'autoprefixer': {},
        },
      },
      transpile: ['@passionatepeople/sanity-utils', 'vue-pincode-input'],
    },
    generate: {
      interval: 200,
      routes: async() => {
        if (!process.env.STATIC_HOST) {
          // eslint-disable-next-line no-console
          console.error('No STATIC_HOST variable specified!')
          process.exit(1)
        }
        await getSitePayload(process.env.STATIC_HOST)
        const { pages } = require('./dist/data.json')
        // eslint-disable-next-line no-console
        console.log('Explicit routes to generate:')
        // eslint-disable-next-line no-console
        pages.forEach(({ route }) => console.log(` - ${route}`))
        return pages
      },
      fallback: true,
    },
    purgeCSS: {
      paths: [
        'components/**/*.vue',
        'layouts/**/*.vue',
        'pages/**/*.vue',
        'plugins/**/*.js',
        'dist/*.json',
      ],
      whitelistPatterns: [/bg-/, /text-/, /from-/, /to-/, /border-/, /lyt-/, /w-/, /grid-cols-/],
      extractors: [
        {
          extractor(content) {
            return content.match(/[\w-.:!/]+(?<!:)/g)
          },
          extensions: ['html', 'vue', 'js', 'json'],
        },
      ],
    },
    /*
     ** Storybook module configuration
     ** See https://storybook.nuxtjs.org/options/
     */
    storybook: {
      addons: ['@storybook/addon-controls/register', '@storybook/addon-viewport/register'],
    },
    watchers: {
      webpack: {
        ignored: [
          '**/*.{md,log,prettierignore,prettierrc,stylelintignore,npmrc,gitignore}',
          '**/.git/**',
        ],
      },
    },
  }
}

Answer 1

更新

实际问题实际上是 ESlint 从 1.x.x 到 3.x.x 的版本升级。 git bisect 帮助找出了真正的罪魁祸首！

再次克隆 repo 并再次重新安装依赖项，解决了上述所有问题，同时运行 yarn dev!

Nuxt应用本地开发服务器不断重载

Nuxt application local development server constantly reloading

nuxt.js

更新