2016-05-17 8 views
7

Я пытаюсь загрузить несколько компонентов Vue.js в файл app.js (с помощью браузера/vueify через elixir) в проекте laravel.Компоненты Async/Lazy Load Vue с браузером

Вместо того чтобы загружать каждый компонент сразу, я хотел бы ленить загружать отдельные компоненты VUE, когда они необходимы, с помощью vue router.

Где я могу установить файл partition bundle json и как он должен быть структурирован?

На данный момент, Ive связали нижеследующий в моем главном 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) 
    } 
    } 
}) 

Вот где я застрял:

  1. Как мы ленивые нагрузки все .vue, перечисленные выше в router.map функция?
  2. Как установить partition table json файл для вышеуказанного и где его следует сохранить?
+0

Довольно старый вопрос, но если кому-то нужна дополнительная информация для ленивых компонентов загрузки. Вот ссылка на [docs] (https://router.vuejs.org/en/advanced/lazy-loading.html). – AWolf

ответ

1

Из документации https://vuejs.org/v2/guide/components.html#Async-Components

Если вы Browserify пользователя, который хотел бы использовать компоненты асинхронных, его создатель, к сожалению, стало ясно, что асинхронной загрузки «не то, что Browserify будет поддерживать ». Официально, по крайней мере. Сообщество Browserify обнаружило некоторые обходные пути, которые могут быть полезны для существующих и сложных приложений. Для всех других сценариев, , мы рекомендуем просто использовать Webpack для встроенной, первоклассной поддержки async.