nginx nuxt3和vuetify3页面响应慢

kpbpu008 于 2023-02-03 发布在 Nginx

关注(0)|答案(1)|浏览(481)

我用docker compose创建了一个前端开发环境，配置是nginx + nuxt 3 + vuetify 3，我在Pages目录下创建了vue，显示出来要120000 ms，慢到我都没法开发了。
我想知道为什么要花这么长时间。而且看起来它正在获取所有的vuetify代码。
此外，一些请求会出现错误。

http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VChip/VChip.css
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VGrid/VGrid.css
http://host.docker.internal/_nuxt/node_modules/nuxt/dist/pages/runtime/app.vue
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VNoSsr/VNoSsr.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VColorPicker/util/index.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VList/VListChildren.mjs?v=afbc0ebb
http://host.docker.internal/_nuxt/node_modules/vuetify/lib/components/VProgressCircular/VProgressCircular.css?v=afbc0ebb

访问是从host.docker.internal：80到主机：80 -〉nginx容器：80 -〉nuxt容器：3000。nuxt服务器通过此命令运行。

npx nuxi dev

我不知道为什么会有这么多的要求，这也不太正常，到底出了什么问题？
我对nuxt和vuetify都是新手，我也不熟悉webpack的工作原理。

nginx

来源：https://stackoverflow.com/questions/74728507/nuxt3-and-vuetify3-slow-page-response

1条答案

按热度按时间

a8jjtwal1#

有同样的问题，也许添加你的nuxt配置是明智的。也许有人能想出该怎么做。
我的如下：

{
...
  css: ['vuetify/styles'],
  build: {
    transpile: ['vuetify'],
  },
  modules: [
    // eslint-disable-next-line require-await
    async (_options, nuxt) => {
      // @ts-ignore
      nuxt.hooks.hook('vite:extendConfig', (config) => config?.plugins && config.plugins.push(vuetify({ autoImport: true })))
    },
  ],
...

和插件/vuetify.ts

// @ts-ignore
import {defineNuxtPlugin, useRuntimeConfig} from '#app'

import {createVuetify} from 'vuetify'
import * as components from 'vuetify/components'
import {aliases, mdi} from 'vuetify/iconsets/mdi-svg'
import { md3 } from 'vuetify/blueprints'
import {useDark} from '@vueuse/core'

export default defineNuxtPlugin((nuxtApp) => {
  const isDark = useDark().value

  const vuetify = createVuetify({
    ssr: true,
    // https://next.vuetifyjs.com/en/features/blueprints/
    blueprint: md3,
    components,
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: {
        mdi,
      },
    },
    // https://next.vuetifyjs.com/en/features/theme/
    theme: {
      defaultTheme: isDark ? 'dark' : 'light',
      themes: {
        dark, // theme defined earlier
        light, // theme defined earlier
      },
    },
  })
  nuxtApp.vueApp.use(vuetify)
})

赞(0）回复(0）举报 2023-02-03

我来回答

nginx nuxt3和vuetify3页面响应慢

1条答案

相关问题

热门标签

最新问答