异步加载一组模块

Question

在vue.js（2.x）中，我可以异步地进行组件加载 - 这意味着该组件的代码将存储在单独的捆绑包中 - 通过将相应路由的定义从

// routes.js

import Messages from '@/views/messages'

export default [
  {
    path: '/messages',
    name: 'messages',
    component: Messages
  }
]  

to

// routes.js

export default [
  {
    path: '/messages',
    name: 'messages',
    component: () => import('@/views/messages')
  }
]  

中更改为我可以捆绑2（或更多）路由组件在一起，使它们的代码被同时存储在同一捆绑包中并同时加载（异步）？

我要这样做的原因是因为该组中的组件只能访问具有一定角色的用户，因此用户都可以访问所有角色，或者它们都无法访问。

Answer 1

文档在这里 。

---

@vue/cli

如果您使用@vue/cli开发，则使用webpack在引擎盖下，您需要告诉WebPack如何将其块分组，使用import（）import（）< /code>：

const Foo = () =>
  import(/* webpackChunkName: "foo-bar" */ './Foo.vue')
const Bar = () =>
  import(/* webpackChunkName: "foo-bar" */ './Bar.vue')
const Baz = () =>
  import(/* webpackChunkName: "baz" */ './Baz.vue')

---

使用vite，您正在开发中的vite

，您使用的是在引擎盖下的汇总，并且需要告诉crolup如何分组块，以vite.config.js ：

export default defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#outputmanualchunks
      output: {
        manualChunks: {
          'foo-bar': [
            './src/Foo',
            './src/Bar',
          ],
          baz: [
             './src/Baz'
          ]
        },
    },
  },
})