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时修复了上述所有问题！