异步组件 Vue 2答案

【问题标题】：Async components Vue 2异步组件 Vue 2
【发布时间】：2017-07-24 17:38:00
【问题描述】：

我正在尝试使用异步组件。这是我的配置：

Vue 2 使用单文件组件方法
Webpack 2
Vue 路由器

该应用程序非常基本，我在App 中包含一个“所有人”部分，在Admin 中包含一个“管理员”部分。当且仅当我访问相应的路线时，我想加载组件以及与Admin 相关的所有.js。

在阅读了 vue-router docs on Lazy Loading 和 Vue2 on async components 之后，我仍然不确定如何做到这一点，尤其是使用 单文件组件 方法.

这是我目前所做的，但我不知道是否可以，因为在 Vue2 的文档中他们说：

Vue.component(
  'async-webpack-example',
  () => import('./my-async-component')
)

我还需要用 webpack 做什么，所以它会创建一大块与Admin 相关的所有内容，这样adminChunk.js 就会在到达管理路径时被加载？

使单个文件组件成为异步组件的语法是什么？

app.js

const Admin = resolve => {
    // require.ensure is Webpack's special syntax for a code-split point.
    require.ensure(['./components/admin/Admin.vue'], () => {
        resolve(require('./components/admin/Admin.vue'))
    })
};

const routes = [
    { path: '/', component: App },
    { path: '/admin', meta: { requiresAdmin: true }, component: Admin},
];

Admin.vue

<template>
        <admin-menu></admin-menu>
        <child></child>
</template>


<script>
    import AdminMenu from './Admin-Menu.vue'
    import Child from './child.vue

    export default{
        data () {
        },
        components: {
            AdminMenu,
            Child,
        },
    }
</script>

【问题讨论】：

嘿嘿，我在 vue 2 中做 SSR，并且和你的 Admin.vue 和 app.js 一样。正是 require.ensure 允许您延迟加载它们。你有没有机会在这上面放一个 JS fiddle 来进一步挖掘它？
没错，它实际上已经在工作了，因为 webpack 正在检测代码并自动创建块。块的名称是 0.js，你知道如何指定名称吗？所以它可能是像 admin.js 之类的东西
在尝试了几个小时关于使用 Webpack 拆分异步组件的官方 Vue 文档之后，这是真正可行的解决方案。多谢你们。只是一个补充：require.ensure() 的第一个参数可以是一个空数组[]。无需在resolve() 中复制您require() 的文件。这是Webpack require.ensure() official docs以防万一。

标签： javascript vuejs2 webpack-2 vue-router async-components

【解决方案1】：

您可以将第三个参数传递给require.ensure 函数与块的名称。

【讨论】：