Vue 2.7.14 + Vite：导入的组件在本地正确渲染，但在生产中<!---->

Question

背景

我有一个导入各种组件的页面，例如设置侧边栏、散点图等。

我按如下方式加载组件：

  export default defineComponent({
    components: {
      ClickToEdit: () => import('@/components/form/ClickToEdit.vue'),
      PlaceRankSettings: () => import('@/views/placerank/components/PlaceRankSettings.vue'),
      LoadingPanel: () => import('@/components/form/LoadingPanel.vue'),
      ...
    },

在模板中，我使用的设置如下：

          <PlaceRankSettings
            :loading="loading"
            @select="updateViewMode"
          />

问题

使用

vite

 在本地一切正常，但是当我使用 

vite build

 时，设置组件呈现为 

<!---->

。

我尝试将导入包装在

async/await

、

defineAsyncComponent

 等中，但没有任何效果。

此外，所有其他组件都已正确渲染。

关于为什么一个设置组件没有被渲染有什么想法吗？

Answer 1

发现问题了。子组件正在导入 vue-slider-component，并且存在涉及 Vite 和 Rollup 的未解决问题：

https://github.com/NightCatSama/vue-slider-component/issues/642.

解决方案

解决方案是在

requireReturnsDefault: true

 上添加 

vite.config.js

：

export default defineConfig({
  // ...{ otherOptions }
  build: {
    commonjsOptions: {
       requireReturnsDefault: true,
    },
  },
})