标签: async-components

我正在使用laravel 5.4和vue 2,我想使用按钮将组件加载为异步.我的Vue js组件是独立的:example.vue和test.vue,我将它们加载为html标记.

这是我的app.js:

import './bootstrap';
import example from './components/Example.vue';

Vue.component('example', example);

const app = new Vue({
el: '#app'
});

这是展示组件的地方

    <How can i use Async components?div id="app">
         <example2></example2> 
    </div>

我如何使用Async组件？

不,我想你不理解我.这是我的组件注册

import './bootstrap';
import example from './components/Example.vue';

Vue.component('example', example);

Vue.component('example2', function (resolve) {

require(['./components/Example2.vue'],resolve)

})


const app = new Vue({
el: '#app'
});

并且在require中,它默认已解析(如显示)我不知道在调用组件时如何在我的页面中传递解析并拒绝此方法的键.

我不确定这是否可能，但看起来有些活动部件已经存在。

目标： 创建一个单文件 Vue 3 组件库，该库将使用 Vite 编译成单独的块，并在运行时动态/异步加载。应用程序本身将加载，然后加载单独分块元素的目录以放入工具箱中，因此之后可以更新每个元素，并且可以通过将新块放入同一路径来添加新元素。

到目前为止，我可以在 vite.config 中创建单独的块，如下所示：

...
build: {
  rollupOptions: {
    output: {
      ...buildChunks()
    }
  }
}
...

buildChunks函数迭代 ./src/toolbox 路径中的 SFC 文件并返回一个对象，例如...

{
  'toolbox/comp1':['./src/toolbox/comp1.vue'],
  'toolbox/comp2':['./src/toolbox/comp2.vue'],
  'toolbox/comp3':['./src/toolbox/comp3.vue'],
  ...
}

这一切都有效，但我不确定如何实现下一个飞跃，即服务器代码动态加载所有生成的块文件，而不在代码中明确列出它们。此外，由于 Vite 构建会在每个构建的文件名中添加 ID（例如 comp.59677d29.js），因此无法在导入中显式引用实际文件名。

到目前为止，我考虑的是对每个文件使用DefineAsyncComponent(()=>import(url))，但我需要生成要导入的这些文件的列表...这可以通过构建我猜是在构建时的清单文件。

有什么建议么？有更好的方法吗？

我正在尝试使用createBrowserRouterReact Router v6 中的函数延迟加载路由元素，但我不断收到此错误：`位置“/admin/reports/enrollees”处的匹配叶路由没有元素或组件。这意味着默认情况下它将呈现空值，从而导致“空”页面。这是我的路线文件：

export default createBrowserRouter([
    {
        path: '/admin/reports',
        children: [
            {
                path: '',
                element: <Index />,
            },
            {
                path: 'enrollees',
                lazy: () => import('../../components/Reports/Enrollees'),
            },
            {
                path: 'facilities',
                lazy: () => import('../../components/Reports/Facilities'),
            }
        ],
    }
])

我一开始尝试这样做：

export default createBrowserRouter([
    {
        path: '/admin/reports',
        children: [
            {
                path: '',
                element: <Index />,
            },
            {
                path: 'enrollees',
                element: lazy(() => import('../../components/Reports/Enrollees')),
            },
            {
                path: 'facilities',
                element: lazy(() => import('../../components/Reports/Facilities')),
            }
        ],
    }
])

但我得到了错误：Functions are not valid …