Question

我正在尝试在laravel项目中将许多Vue.js组件加载到我的app.js文件中（通过elixir使用browserify / vueify）。

我不想一次加载每个组件，而是在使用vue router时需要延迟加载各个vue组件。

我在哪里设置 partition bundle json 文件以及如何构建它？

目前，我已将以下主要 app.js 文件捆绑在一起：

import Vue from 'vue';
import Resource from 'vue-resource';
import VueRouter from 'vue-router';

// These are the components that I wish to lazy load:
// import Users from './components/Users.vue';
// import Sales from './components/Sales.vue';
// import Projects from './components/Projects.vue';
// import Dashboard from './components/Dashboard.vue';
// import Receipts from './components/Receipts.vue';

Vue.use(Resource);
Vue.use(VueRouter);

var router = new VueRouter();

router.map({
  '/async': {
    component: function (resolve) {
      loadjs(['./components/Users.vue'], resolve)
    }
  }
})

这就是我陷入困境的地方：

我们如何延迟加载 router.map 函数中列出的所有.vue组件？
如何为上述设置 partition table json 文件，以及应该保存在哪里？

Answer 1

来自文档https://vuejs.org/v2/guide/components.html#Async-Components

如果你是一个想要使用异步组件的 Browserify 用户，那么它的创建者很清楚地表明异步加载“不是Browserify将支持的东西。” / strong>官方，至少。 Browserify社区已找到一些解决方法，这可能对现有和复杂的应用程序有所帮助。对于所有其他方案，我们建议只使用Webpack 进行内置的一流异步支持。

使用browserify的Async / Lazy Load Vue组件

1 个答案: