NUXT 项目无法构建

Question

我正在 nuxt + nest 堆栈上编写管理面板。
我正在使用这个模板：https://github.com/stephsalou/nuxt-nest-template

在开发模式下，项目正常启动，但我只是想构建并立即出现错误。这个文件是nuxt自己编译的

  11 | export const LoadingPanel = () => import('../../client/components/LoadingPanel.vue' /* webpackChunkName: "components/loading-panel" */).then(c => wrapFunctional(c.default || c))
  12 | export const Modal = () => import('../../client/components/Modal.vue' /* webpackChunkName: "components/modal" */).then(c => wrapFunctional(c.default || c))
> 13 | export const  = () => import('../../client/components/index.ts' /* webpackChunkName: "components/" */).then(c => wrapFunctional(c.default || c))
     |               ^
  14 | export const Breadcrumb = () => import('../../client/components/Breadcrumb/Breadcrumb.vue' /* webpackChunkName: "components/breadcrumb" */).then(c => wrapFunctional(c.default || c))
  15 | export const BreadcrumbItem = () => import('../../client/components/Breadcrumb/BreadcrumbItem.vue' /* webpackChunkName: "components/breadcrumb-item" */).then(c => wrapFunctional(c.default || c))
  16 | export const BreadcrumbRouteBreadcrumb = () => import('../../client/components/Breadcrumb/RouteBreadcrumb.vue' /* webpackChunkName: "components/breadcrumb-route-breadcrumb" */).then(c => wrapFunctional(c.default || c))

我找到了这个错误的原因。在 components 文件夹中有 index.ts 收集所有组件，我已经从这个文件中获取了我需要的组件。 ** Nuxt 进入组件文件夹，将所有文件视为组件，并将它们全部收集在一个表格中。 ** 这些组件取自管理模板，我无法删除 index.ts，因为它被大量使用，它会破坏一切。在开发模式下也有类似的错误，但将 index.js 更改为 index.ts 会有所帮助。

这个问题怎么解决？？

Nuxt 配置

const config: NuxtConfig = {
  // Disabled nuxt telemetry
  telemetry: false,
  /*
   ** Nuxt rendering mode
   ** See https://nuxtjs.org/api/configuration-mode
   */
  mode: 'universal',
  // base nuxt src dir
  srcDir: './client',
  /*
   ** Nuxt target
   ** See https://nuxtjs.org/api/configuration-target
   */
  target: 'server',
  /*
   ** Headers of the page
   ** See https://nuxtjs.org/api/configuration-head
   */
  head: {
    title: 'Admin Products SeaRates',
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || '',
      },
    ],
    link: [
      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800'},
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'}
    ]
  },
  router: {
    linkExactActiveClass: 'active'
  },
  /*
   ** Global CSS
   */
  css: [
    '@/assets/scss/index.scss',
    '@/assets/css/demo.css',
    '@/assets/css/nucleo-icons.css'
  ],
  /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
  plugins: [
    `@/plugins/dashboard-plugin.js`
  ],
  /*
   ** Auto import components
   ** See https://nuxtjs.org/api/configuration-components
   */
  components: true,
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    '@nuxt/typescript-build',
  ],
  netlify: {
    headers: {
      '/*': [
        'Access-Control-Allow-Origin: *',
        `X-Build: ${pkg.version}`
      ],
      '/favicon.ico': [
        'Cache-Control: public, max-age=86400'
      ]
    }
  },
  /*
   ** Nuxt.js modules
   */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxt/content',
    'cookie-universal-nuxt'
  ],
  publicRuntimeConfig: {
    axios: {
      baseURL: `${url}/api`
    }
  },
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},
  /*
   ** Content module configuration
   ** See https://content.nuxtjs.org/configuration
   */
  content: {},

  loading: { color: '#389466' },

  /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/
   */
  build: {

  },
  alias: {
    "@/*": resolve(__dirname, './client'),
  }
}

export default config

Answer 1

如果您已经拥有 Nuxt 的自动导入功能，为什么还要导入所有组件？
使用其中一种。或者，您可以在 nuxt.config.js 文件中排除特定的类似内容

components: [
  {
    path: '~/components/',
    pathPrefix: false,
    pattern: `**/*.{vue,js,ts}`,
    ignore: ["~/components/index.ts"]
  }
]

不确定您是否真的使用 TS，但默认获取 .vue 和 .js 文件。

pathPrefix 非常有用，如果您想获取所有组件，甚至是嵌套组件，如 shown here。

使用ignore 只是不导入index 之一。

最后，阅读本教程可能有助于了解您是否可以让components: true 或对默认行为进行一些修改，如上所述：https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components/