Vue 2 VueRouter 2 Laravel 5.3 — Webpack (проблема с автономной сборкой во время выполнения)

#webpack #laravel-5.3 #vuejs2

#webpack #laravel-5.3 #vuejs2

Вопрос:

Я столкнулся с ошибкой при попытке использовать Vuejs 2 Vue Router 2 Laravel 5.3 с webpack!

Вот мой код:

Мой index.html

 <div id="app">
        <router-view></router-view>
    </div>
  

Мой app.js

 import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Map from './map'

Vue.use(VueRouter);

const router = new VueRouter({
    routes: Map
});

new Vue({
    router,
    render: h => {
        return h(App)
    }
}).$mount('#app');
  

Мое приложение.vue

 <template>
    <router-view></router-view>
</template>

<script>
    export default {
        name: 'App',
    }
</script>
  

При этом возникает следующая ошибка:

Вы используете сборку Vue только для среды выполнения, где параметр шаблона недоступен. Либо предварительно скомпилируйте шаблоны в функции визуализации, либо используйте сборку, включенную в компилятор.

Если я изменю свой импорт Vue с: import Vue from 'vue' на import Vue from 'vue/dist/vue.js' , он работает нормально!

Кто-нибудь знает, как это исправить?

Ответ №1:

Ребята, я думаю, что это было связано с пакетом laravel-elixie-vue!

Я работаю с Anderson, и мы установили свежую версию laravel, которая поставляется с новым пакетом laravel-elixir-vue-2, и решили проблему!

Комментарии Ведовелли и Винисиуса работают правильно, когда мы обновили пакет!

Спасибо

Ответ №2:

попробуйте

 import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Map from './map'

Vue.use(VueRouter);

const router = new VueRouter({
  routes: Map
});

new App({
  router
}).$mount('#app');
  

И удалите из вашего index.html

Ответ №3:

Просто удалите <router-view></router-view> из вашего index.html и с тобой все должно быть в порядке.