首页 文章

使用browserify的Async / Lazy Load Vue组件

提问于
浏览 次
7

我试图在laravel项目中将大量Vue.js组件加载到我的app.js文件中（使用browserify / vueify通过elixir） .

我不想一次加载每个组件，而是在需要时使用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)
    }
  }
})

Here's where I am stuck:

  • 我们如何延迟加载 router.map 函数中上面列出的所有.vue组件？

  • 如何为上述设置 partition table json 文件，应该在哪里保存？

javascript browserify vue.js laravel-elixir vue-router

1 回答

  • 1

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

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

    回复于

相关问题